[jQuery]integrare "gallery" a slider

[iKat]

Buongiorno!

Mi trovo a chiedere aiuto perchè non so più da che parte girarmi

Questa è la pagina dove sto lavorando http://helvetica.altervista.org/gioielli.html

Sto utilizzando questo slider con zoom
http://tympanus.net/Tutorials/PortfolioZoomSlider/

però dovrei "integrare" anche l'opzione delle "preview" accanto, ovvero il primo esempio qui
www.professorcloud.com/mainsite/cloud-zoom.htm


vorrei capire se è possibile, perchè ho visto un po' il codice e mi sembra abbiano stesse funzioni

(che poi non capisco l'utilità di avere due gallery, visto che c'è già lo slider, ma il cliente ha [quasi] sempre ragione )



Inoltre ho un problema con lo slider: ho creato un <div> con la cornice dorata che sta sopra lo slider, solo che quest'ultimo funziona solo con firefox e IE (bella roba xD), mentre con chrome e safari non va. Possibile che questo <div> "copra" lo slider?


Grazie anticipamente all'anima pia che mi aiuterà

[iKat]

Uhm up

Forse non mi son spiegata molto bene
vorrei integrare il calssico fancybox (http://fancybox.net/) ad uno slide (ieri ho trovato questo http://www.efectorelativo.net/laboratory/noobSlide/, esempio 7)

[cavicchiandrea]

Le integrazioni o modifiche comporta una ottima conoscenza del javascript e/o librerie (jquery/mootools) che si usano, cerca in rete un script che si adatti alle tue esigenze o rinuncia, trovare altre soluzioni credo siano difficili

[iKat]

Accidenti proverò a cercare qualcosa e a lavorarci su oggi. Purtroppo vuole per forza lo slide, le preview accanto e al click sull'immagine il fancybox, vedrò di scendere a compromessi

[lucavizzi]

Questo è il codice dell'immagine grande:

<div class="zoom-small-image">
<a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4">
[img]/images/zoomengine/smallimage.jpg[/img]</a></div>

nota che il tag "a" ha per id: "zoom1".

Questo invece è il codice delle "preview":

     
        


<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1' , smallImage: '/images/zoomengine/smallimage.jpg' ">
[img]/images/zoomengine/tinyimage.jpg[/img]</a>
        
          <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
[img]/images/zoomengine/tinyimage-1.jpg[/img]</a>                  
        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
[img]/images/zoomengine/tinyimage-2.jpg[/img]</a></p>

nell'attributo "rel" viene specificato dove viusualizzarle (zoom1, l'id del box grande)

questo è il codice che inizializza lo zoom:

$(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    });

dove .cloud-zoom è la classe del box grande e .cloud-zoom-gallery è la classe delle thumbnails

Per la fancybox dovrebbe essere sufficiente:

$(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();//fatto copia incolla...
        $('.cloud-zoom').fancybox();
    });

[iKat]

Io non so come rigraziarti, funziona!
http://helvetica.altervista.org/gioielli.html

Ho una sola domanda (che se non si può fare fa lo stesso, è già tanto che ci siano le preview adesso )
è possibile mantenere le frecce dello slide almeno nell'immagine ingrandita (nello zoom) come qui?
http://helvetica.altervista.org/prototipi.html

ho rinunciato a tenerle accanto alla cornice perchè non va con chrome e safari però nello zoom funziona, per questo chiedo se c'è la possibilità di mantenerle

[lucavizzi]

Aggiungi questo blocco:

<p style="display:none;">



</p>

il paragrafo ha il display:none, quindi l'intero blocco sarà come se non ci fosse.
Negli href metti le path delle tre immagini grandi, il "rel" uguale a quello dell'immagine principale farà apparire le frecce.

[iKat]

Forse sbaglio io qualcosa (anzi, sicuramente, visto che sono in ufficio e faccio di corsa), ma non visualizzo le frecce
http://helvetica.altervista.org/gioielli.html

ne approfitto per ringraziarti lucavizzi, già fino ad ora è stato un grosso aiuto per me

[iKat]

Uhm up

[lucavizzi]

Originariamente inviato da iKat
Forse sbaglio io qualcosa (anzi, sicuramente, visto che sono in ufficio e faccio di corsa), ma non visualizzo le frecce
http://helvetica.altervista.org/gioielli.html

ne approfitto per ringraziarti lucavizzi, già fino ad ora è stato un grosso aiuto per me

Pare che per raggruppare, usi l'attributo "rev" invece del classico, per fancybox, "rel".
Quindi sostituisci il vecchio blocco con questo:

<p style="display:none;">




</p>

Aggiungi anche:
rev="group1"
al link con id="zoom1":

<a href='http://helvetica.altervista.org/_altervista_ht/preview/images/collana_albero.png' class='cloud-zoom' id='zoom1' rel="adjustX: 12, adjustY:0" rev="group1">