zoom immagine [piccolo problema]

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
Ciao,

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

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

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
eppure dovresti conoscerle le regole di questo forum
comincia ad adattare il titolo della discussione
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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?
PHP:
<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

Utente Attivo
24 Giu 2009
298
0
0
Grazie della risposta ho risolto; posto ciò che ho fatto in modo che può servire a chi riscontra lo stesso problema:
HTML:
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Immagine thumbnails con zoom e didascalia HTML e CSS 0
K consiglio sul metodo per lo zoom dell'immagine PHP 4
C Effetto zoom nello stesso riquadro dell'immagine (diverso dal solito) HTML e CSS 8
andreas88 creare effetto zoom su una immagine HTML e CSS 2
B Navigazione un'immagine (panning - zoom) Flash 1
bluebirdoncanvas [Photoshop] problema dimensioni immagini o zoom Photoshop 0
A [HTML] background fisso che non si ridimensiona con lo zoom HTML e CSS 4
StePunk [HTML] sito responsive / zoom automatico / risoluzione HTML e CSS 2
V [HTML] impedire il ridimensionamento delle immagini zoom browser HTML e CSS 11
J zoom g2.1nu Hardware 0
F Zoom Slider jQuery 0
B Zoom browser HTML e CSS 2
E zoom con telecamera ip IP Cam e Videosorveglianza 4
F zoom jquery mappa jQuery 1
filomeni Zoom pagina HTML e CSS 3
M Layout e zoom HTML e CSS 1
A problema spazi tra i Div quando nello zoom in in Chrome o dispositivi mobili HTML e CSS 1
S Posizionamento Zoom della pagina: i div non stanno al loro posto HTML e CSS 2
G Imposta opzioni dei browser al 100% zoom HTML e CSS 7
I Problema zoom testo-box HTML e CSS 0
J Slideshow with zoom-in-zoom-out-animation Javascript 0
K zoom di un sito e irham 3.0 HTML e CSS 8
C Aiuto Effetto Lente/Zoom Flash Flash 1
P Zoom di parte di una pagina Javascript 1
R Gallery con zoom Javascript 4
D barra zoom Flash 0
C Effetto zoom! Flash 5
D zoom mappa google Javascript 4
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2
W Immagine come maschera photoshop Photoshop 1
L Ultima immagine Windows e Software 0
A Immagine decentrata con sfondo trasparente Photoshop 0
A Scontornare immagine di bassa qualità. Photoshop 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
Y Percorso assoluto file immagine HTML e CSS 9
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3

Discussioni simili