Remplazar imagenes

Juarcko · #1 (**permalink**) 26/05/2016, 13:40

Hola buena tarde

Se supone que lo que quiero hacer es que tengo un N numero de imagenes y una principal

algo asi

N

IMG1 IMG2 IMG3

Que dando click a cualquier IMG1,2 o 3 esta se remplaza por la N

Por ejemplo si cliqueo en la IMG2 quedaria de la siguiente manera

IMG2

IMG1 IMG2 IMG3

En HTML ya lo logre pero el problema me surge al tratar de implementarlo en PHP
las imagenes las relaciono con el ID "principal".

Dejo los codigos con los que he trabajado. Espero me puedan ayudar con alguna idea

<body>

<img src="seminuevos/BMW-X5_xDrive40e_2016.jpg" id="principal"
height="500" width="750" class="img-rounded img-responsive, x5">

<img class="interior1" src="seminuevos/small/image1.png"
onClick="document.getElementById('principal').src= 'seminuevos/grande.png'">

<img class="interior2" id="zoom_02" src="seminuevos/interiores bmw x5/una.png"
data-zoom-image="seminuevos/tablero.png";
onClick="document.getElementById('principal').src= 'seminuevos/tablero.png';">

<img class="interior3" id="zoom_03" src="seminuevos/interiores bmw x5/dos - copia.png"
data-zoom-image="seminuevos/interiores bmw x5/dos.jpg";
onClick="document.getElementById('principal').src= 'seminuevos/interiores bmw x5/dos.jpg';">

----------------------------------------------------------------------------------------------------

Intento hacerlo en PHP no me marca ningun error pero tampoco me hace la funcion del
onClick

dejo mi implemenacion de como es que lo tengo

echo "<img src='".$row['principal']."' class='img-rounded img-responsive, x5' id='grande' height='500' width='750''/>";

echo "<img src='".$row['principal']."' class='interior1' id='zoom_01' width='200' height='150'
data-zoom-image='".$row['principal']."'
onClick=document.getElementById('grande').src='".$ row['principal']."'/>";

echo "<img src='".$row['frente']."' class='interior2' id='zoom_02' width='200' height='150'
data-zoom-image='".$row['pricipal']."'
onClick=document.getElementById('grande').src='".$ row['frente']."'/>";

echo "<img src='".$row['trasera']."' class='interior3' id='zoom_03' width='200' height='150'
data-zoom-image='".$row['trasera']."'
onClick=document.getElementById('grande').src='".$ row['trasera']."'/>";

Chijt · #2 (**permalink**) 26/05/2016, 18:49

Prueba con esto haber si te funciona y si te funciona comparalos y veras los errores que tienes.

Código PHP:

  echo "<img src=\"".$row['principal']."\" class=\"img-rounded img-responsive, x5\" id=\"grande\" height=\"500\" width=\"750\"/>"; 
echo "<img src='".$row['principal']."' class='interior1' id='zoom_01' width='200' height='150' data-zoom-image='".$row['principal']."' onClick=\"document.getElementById('grande').src='".$row['principal']."'\"/>"; 
echo "<img src='".$row['frente']."' class='interior2' id='zoom_02' width='200' height='150' data-zoom-image='".$row['principal']."' onClick=\"document.getElementById('grande').src='".$row['frente']."'\"/>"; 
echo "<img src='".$row['trasera']."' class='interior3' id='zoom_03' width='200' height='150' data-zoom-image='".$row['trasera']."' onClick=\"document.getElementById('grande').src='".$row['trasera']."'\"/>";

manuparquegiralda · #3 (**permalink**) 29/05/2016, 17:43

¿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:

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

Código PHP:

Ver originalecho '<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:

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

Esto te va a funcionar seguro.