zoom immagine [piccolo problema]

[emanuelevt]

Ciao,

ho questo piccolo problema
questo è il codice nell'head:

jQuery(function($){
	
/***applico effetto zoom***/
	$('a.zoom').easyZoom({
		parent: '#container'
	});
	
/**facendo click su questo div faccio in modo di cambiare sia
l'img del div dove è contenuto lo zoom sia del div in miniatura***/

	$("#foto2").click(function(e){
	
	var x=$("#foto2").attr('src');
	$("a.zoom").attr("href", 'img/logo.png');
	$('#oo').attr('src', x);
			e.preventDefault();
	});
});

questo è il codice nel body:

	echo "<div  id='' style='position:relative; float:left;margin:20px; width:500px;'>";				
					
					echo "<a href='' class='zoom' id='rif'><img src='foto/$foto1' style='width:379px; height:253px;border:1px solid silver;' id='oo' /></a>";

			echo "</div>";	
					?><div id='sotto_scarpe'><?php
					echo "<a href='foto/$foto1'  ><img src='foto/$foto1' style='width:125px; border:1px solid silver;' id='foto1'/></a>";
					echo "<a href='foto/$foto2'  ><img src='foto/$foto2' style='width:125px;border:1px solid silver;' id='foto2'/></a>";
					echo "<a href='foto/$foto3'  ><img src='foto/$foto3' style='width:125px;border:1px solid silver;' id='foto3' /></a>";
					?>
					</div><?php
			echo "<div>";

in quanto ho una immagine (che chiamo per convenzione miniatura) dove passandoci sopra si apre una nuova finestra con la stessa immagine zoomata (che chiamo per convenzione ingrandita); sotto a tutto questo ci sono 3 img, vorrei fare in modo che cliccando su una di queste img (anche se per comodità ancora non fatto questo ma mi sono concentrato solo su img2), si modificano sia miniatura che ingrandita; ma mentre riesco a modificare miniatura correttamente lo stesso non vale per ingrandita in quanto passando sopra alla miniatura vedo l'img ingrandita dell'immagine predefinita.

 

[criric]

eppure dovresti conoscerle le regole di questo forum
comincia ad adattare il titolo della discussione

 

[emanuelevt]

Ok, hai perfettamente ragione, come faccio a cambiare il titolo?

 

[criric]

forse modificando il tuo primo messaggio riesci a cambiare anche il titolo ma non c'è la fa mai nessuno, al massimo te lo cambio io
ho modificato l'html del tuo codice per fare qualche prova
volevi fare qualcosa di simile?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<?php

$foto1 = "foto/1.jpg";
$foto2 = "foto/2.jpg";
$foto3 = "foto/3.jpg";
?>
<script>
    $(document).ready(function(){
        $("#sotto_scarpe img").click(function() {            
            $('#oo').attr('src', $(this).attr('src'));            
        });
    });
</script>
<?php
echo "<div id='zoom' style='position:relative; float:left;margin:20px; width:500px;'>";

echo "<img src='$foto1' style='width:379px; height:253px;border:1px solid silver;' id='oo' />";

echo "</div>";
?>
<div id='sotto_scarpe' style='clear:both'>
    <?php
    echo "<img src='$foto1' style='width:125px;border:1px solid silver;' id='foto1'/>";
    echo "<img src='$foto2' style='width:125px;border:1px solid silver;' id='foto2'/>";
    echo "<img src='$foto3' style='width:125px;border:1px solid silver;' id='foto3'/>";
    ?>
</div>

ho tolto il metodo easyZoom() perche non so a quale plugin appartiene

 

[emanuelevt]

Grazie della risposta ho risolto; posto ciò che ho fatto in modo che può servire a chi riscontra lo stesso problema:

jQuery(function($){
	
/***applico effetto zoom***/
	$('a.zoom').easyZoom({
		parent: '#container'
	});
	
/**facendo click su questo div faccio in modo di cambiare sia
l'img del div dove è contenuto lo zoom sia del div in miniatura***/

	$("#foto2").click(function(e){
		$('a.zoom').easyZoom({
		parent: '#container'
	});
	var x=$("#foto2").attr('src');
	$("a.zoom").attr("href", 'img/logo.png');
	$('#oo').attr('src', x);
			e.preventDefault();
	});
});

in pratica ho riproposto il metodo easyZoom anche dopo l'evento click. In tal modo si può avere così lo stesso effetto che ha ad esempio il sito di zalando.it e si può cliccare anche sulle miniature.