Lightbox più zoom

[fermat]

ho messo su una galleria con jquery lightbox per avere le foto in overlay.
il problema però è che nn basta, nel senso che devo dare la possibilità di zoomare le immagini una volta che l'overlay è attivato.
è possibile secondo voi??
il fatto è che devo dare la possibilità di vedere i mini dettagli della foto.

[fermat]

nessuno ha mai avuto a che fare con qualcosa del genere??

[cavicchiandrea]

Probabilmente no, cerca uno script jquery che fa lo zoom poi prova a a collegarlo al lightbox

[fermat]

sto provando ma senza successo.
ho scaricato uno script dalla sezione javascript (la libreria si chiama iZoom).
su una foto "normale" funziona.
nn riesco invece ad applicarla alle immagini create nell'overlay di ligthbox.
usare lo script è semplice:

        <script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="lib/iZoom.js"></script>
        <script type="text/javascript"> 
            $('document').ready(function(){
                $('#lightbox-imag').iZoom({diameter:200});

            });
        </script>

come id gli ho dato quello usato da lightbox; l'ho contallato sia nel codice del file js, sia usando firebug.
però la lente nn compare.
inizio a pensare che sia impossibile.

[Vindav]

quello che vuoi fare è alquanto complicato... io tempo fa avevo fatto qualcosa di molto simile utilizzando il plugin di jquery lightbox e questo plugin per lo zoom, sempre di jquery. Hai bisogno di 3 versioni della stessa immagine di dimensioni differenti, una è la miniatura, una è quella visualizza da lightbox e l'ultima(la piu grande) è quella utilizzata per lo zoom. Inoltre è necessario modificare la libreria js lightbox principalmente per 2 motivi.

- I plugin fanno sempre riferimento a particolari elementi html con un id e class ben specifico, lo dimostra anche il tuo esempio che fa riferimento ad un elemento con id lightbox-imag. Ma per applicare lo zoom sull'immagine ingrandita è necessario applicare questo id al div con overlay o all'immagine ingrandita che crea lightbox dinamicamente per mostrare la galleria. Quindi va modificata la libreria di lightbox per la creazione/modifica della parte html interessata.

- Nella maggior parte dei casi I plugin vengono inizializzati al caricamento della pagina(anche qui il tuo esempio lo dimostra), ma con l'aggiunta del lightbox è indispensabile far partire il plugin solo quando avviene il click su un immagine della galleria perche al caricamento della pagina non sappiamo ancora a quale immagine ingrandita vogliamo applicare lo zoom. Anche in questo caso è necessario modificare la libreria del lightbox per far partire l'inizializzazione dello zoom nel momento corretto.

Questo è solo un esempio delle modifiche che dovresti effettuare. Come avrai notato è un operazione abbastanza complessa anche se si ha una conoscenza approfondita di jquery.

[fermat]

si mi ero accorto.
infatti ho già provato a fare qualche modifica a lightbox.
avevo pensato di caricare lo zoom al passaggio del mouse sopra all'immagine o al div caricato nell'overlay.
ma nn ha funzionato.
le immagini nn sarebbero un problema.
il mio problema rimane fare le modifiche necessarie.
una volta che riesco a fare quelle potrei usare qualsiasi zoom.
#lightbox-imag è l'id che lightbox assegna alle immagini.
è sempre lo stesso.
ho provato a fare in modo che al mouseover su quel div partisse lo zoom.
ma nn parte.
farò qualche altra prova.

[Vindav]

lo so che è sempre lo stesso ma non è su quello che si appoggia lo zoom, o almeno non lo era nel mio caso. Questo è il markup html che crea lightbox:

<div id="jquery-overlay"></div>
			<div id="jquery-lightbox">
				<div id="lightbox-container-image-box">
					<div id="lightbox-container-image">
						[img]../fotos/XX.jpg[/img]
						<div id="lightbox-nav">
							
							
						</div>
						<div id="lightbox-loading">
							<a href="#" id="lightbox-loading-link">
								[img]../images/lightbox-ico-loading.gif[/img]
							</a>
						</div>
					</div>
				</div>
				<div id="lightbox-container-image-data-box">
					<div id="lightbox-container-image-data">
						<div id="lightbox-image-details">
							<span id="lightbox-image-details-caption"></span>
							<span id="lightbox-image-details-currentNumber"></span>
						</div>
						<div id="lightbox-secNav">
							<a href="#" id="lightbox-secNav-btnClose">
								[img]../images/lightbox-btn-close.gif[/img]
							</a>
						</div>
					</div>
				</div>
			</div>

il plugin che ho scaricato necessitava che l'immagine su cui si voleva applicare lo zoom stesse all'interno di un tag <a href> quindi ho dovuto modificare il murkup in questo modo:

<div id="jquery-overlay"></div>
			<div id="jquery-lightbox">
				<div id="lightbox-container-image-box">
					<div id="lightbox-container-image">
<a id="zoom1" class="cloud-zoom" rel="adjustX:-4, adjustY:-4">
						[img]../fotos/XX.jpg[/img]
</a>
						<div id="lightbox-nav">
							
							
						</div>
						<div id="lightbox-loading">
							<a href="#" id="lightbox-loading-link">
								[img]../images/lightbox-ico-loading.gif[/img]
							</a>
						</div>
					</div>
				</div>
				<div id="lightbox-container-image-data-box">
					<div id="lightbox-container-image-data">
						<div id="lightbox-image-details">
							<span id="lightbox-image-details-caption"></span>
							<span id="lightbox-image-details-currentNumber"></span>
						</div>
						<div id="lightbox-secNav">
							<a href="#" id="lightbox-secNav-btnClose">
								[img]../images/lightbox-btn-close.gif[/img]
							</a>
						</div>
					</div>
				</div>
			</div>

Ovviamente la creazione di questa parte html avviene dentro la libreria di lightbox.

Poi ho identificato il punto in cui veniva aperta la galleria(_set_image_to_view) con il click e ho inizializzato il plugin facendo riferimento a l'id zoom1 e ho modificato la proprietà href del tag a applicandoci l'immagine piu grande.

$('#zoom1').attr('href',immagine per lo zoom);
$('#zoom1').CloudZoom();

Ovviamente utilizzando script per lo zoom differenti le modifiche potrebbero cambiare.

[fermat]

capito capito.....
teoricamente il mio nn dovrebbe richiedere grosse modifiche:

        <script type="text/javascript"> 
            $('document').ready(function(){
                $('#myPic1').iZoom({diameter:200});
                $('#myPic2').iZoom({borderColor:'green', borderWidth:3});
                $('#myPic3').iZoom({borderColor:'#f00', borderStyle:'double', borderWidth: '3px'});
            });
        </script> 
	</head>
<body>
            <div class="imgWrapper"> 
                [img]images/00507_macroant_1680x1050.jpg[/img] 
            </div>

la libreria richiede solo l'id dell'immagine.
ecco perchè avevo pensato di fare così:

        <script type="text/javascript"> 
            $('document').ready(function() {
                $('#lightbox-imag').iZoom({diameter:200});
            });
        </script>

gli ho passato l'id impostato nel tag img da light-box.
considera che <div class="imgWrapper"> nn è obbligatorio in quanto ho fatto delle prove siu foto normali senza quel div e nn ho avuto problemi.
inoltre nella libreria nn c'è alcun riferimento.

[Vindav]

c'è ancora una cosa che secondo me non ti è chiara... nel momento in cui tu vai ad applicare lo zoom all'immagine con id lightbox-image questa ancora non esiste. Perche come ti ho gia detto viene creata dinamicamente dal lightbox.

Questo codice:

<script type="text/javascript"> 
            $('document').ready(function() {
                $('#lightbox-imag').iZoom({diameter:200});
            });
        </script>

non potrà mai funzionare.

[fermat]

infatti avevo provato in altri modi.
ad esempio invece di 'document' mettendo il div creato da ligthbox, o usando altri tipi di eventi.
probabilmente sbaglio io.
ma secondo me se c'è un modo per caricare quello script dopo che il div principale di lightbox viene creato il tutto funziona.
solo che nn so come potrei fare, o meglio: quello che ho fatto nn ha funzionato.