Me encuentro con un problemilla que no acierto a solucionar, de seguro que no será tan complicado, pero a mi no me sale. Hago una consulta a un BD y armo un JSON que me trae perfectamente los resultados de la consulta. Quiero hacer una "especie" de galería con imagen y autor, e ir cambiando de foto y autor cada vez que pinchas una de ellas. Pongo una img como principal con el nombre del autor en un div y las otras genero una lista en la que el nombre del autor lo pongo en el argumento title del html, y con jquery cambio el attr title. Pues, así como el nombre principal, lo pone completo, los title los corta.
Codigo jvascript:
Código HTML:
function cambios(){
$("#peques img").click(
function(){
var imagen=$(this).attr("src");
var otroautor=$(this).attr("title");
$("#grande").attr("src",imagen);
$('#author').empty();
$('#author').append(otroautor);
}
)
}
Código HTML:
//Imágenes
if(datos.data[i].principal === true){
document.getElementById("IMGprincipal").innerHTML = "<img id='grande' src="+datos.data[i].imagen+" width='100%'/>";
document.getElementById("author").innerHTML = datos.data[i].autor;
}else{
//creamos un nuevo elemento LI para añadir al UL
let li = document.createElement("li");
//metemos la imagen dentro del LI
li.innerHTML = "<img src=" + datos.data[i].imagen + " onclick='cambios();' title= " + datos.data[i].autor + " >";
document.querySelector("#peques").append(li);
}
