Remplazar imagenes

[manuparquegiralda]

¿Y porque no lo haces con una funcion Javascript ?

En las imágenes te sobra a mi entender el atributo data-zoom-image ya que ese dato lo tienes en el src de la imagen, no es necesario que lo pongas por duplicado. Igualmente, ya que le tienes asignado una clase a cada imagen, puedes añadirle al CSS el ancho y alto de las imágenes y ahorrarlo en el html.

Si no utilizas el atributo id de las fotos pequeñas para ninguna otra función en javascript también te lo puedes ahorrar en el HTML, de este modo te quedará un código mucho más limpio.

Código CSS:

#grande{
     width:750px;
     height:500px;
}
.interior1,.interior2,.interior3{
     width:200px;
     height:150px;
}
 

Código PHP:

echo '<img src="'.$row['principal'].'" class="img-rounded img-responsive, x5" id="grande" />';
 
echo '<img src="'.$row['principal'].'" class="interior1" onClick="poner_foto(this)" />';
echo '<img src="'.$row['frente'].'" class="interior2" onClick="poner_foto(this)" />';
echo '<img src="'.$row['trasera'].'" class="interior3" onClick="poner_foto(this)" />';
 

Código Javascript:

function poner_foto(e){
    var img = e.src;
    document.getElementById("grande").src = img;
}
 

Esto te va a funcionar seguro.