- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- gallery easy slider
-
gallery easy slider
Sto cercando di creare una serie di gallery in JS.
Si tratta di rettangoli orizzontali 900x500px, contenenti 8 icone con particolare dell'immagine che viene visualizzata intera tramite LIGHTBOXLa prima gallery e funzionante e le 16 iconcine si alternano a gruppi di 8 tramite lo slider orizzontale.
Il problema è che non riesco ad applicare l'effetto per piu di una volta.CSS:
#slider ul, li{ margin:0; padding:0; list-style:none; }, li{ /* define width and height of container element and list item (slide) list items must be the same size as the slider area */ width:900px; height:500px; overflow:hidden; } span#prevBtn{} span#nextBtn{}
HTML:
<script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.packed.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'Previous Slide', nextText: 'Next Slide', orientation: 'horizontal' });
});
</script>[............]
<!--inizio galleria -->
<div id="gallery">
<div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="915" height="150" /></div><!-- ILLUSTRAZIONI --><div id="slider"> <ul>
<li>
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li>
</ul>
</div>
<!--fine galleria -->
<!--inizio 2° galleria -->
<div id="advertising"><img src="Nuova cartella/image/WEB.png" width="900" height="150" /></div><!-- WEB TEMPLATES --><div id="slider"> <ul> <li> <a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm.png" width="335" height="280" /> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image22.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm2.png" width="335" height="280" /> </li> </ul>
</div>
</div>
</div>
</body>
-
Ciao,
credo ci sia un bug nel plugin easySlider. Prova a editare il file easySlider.js e a cambiare la riga
obj = $(this); ```in
var obj = $(this);
$("#slider1").easySlider({'prevId':'prevBut1', 'prevText':'Indietro', 'nextText':'Avanti', 'nextId':'nextBut1', 'orientation':'vertical'});
$("#slider2").easySlider({'prevId':'prevBut2', 'nextId':'nextBut2'});
-
Il sistema che mi hai suggerito lo avevo già provato,
avevo provato anche così:$(document).ready(function(){
$("#slider","#slider2").easySlider({
prevText: 'Previous Slide',
nextText: 'Next Slide',
orientation: 'horizontal'});
});
Il problema è che le slide vengono impostate corretamente con prev e next ma purtroppo i bottoni non sono sensibili al click!
Ovvero premendo sia su next che su prev non succede assolutamente nulla!
-
Ciao,
sì, quello è il modo indicato anche sul sito del plugin per attivarlo su un elenco/lista di elementi, però in effetti non funziona. L'unico modo secondo me, una volta fatta la modifica che dicevo nel sorgente easySlider.js, è quello di fare delle singole chiamate per ogni elemento, passandogli degli id diversi per ogni pulsante come opzione.
Ti assicuro che funziona, vedi l'esempio a questo indirizzo: sandbox.planetweblog.net/easySlider/test.html.
-
<script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("#slider").easySlider({ prevText: 'Previous Slide', nextText: 'Next Slide', orientation: 'horizontal' }); $("#slider2").easySlider({ prevText: 'Previous Slide', nextText: 'Next Slide', orientation: 'horizontal' });
});
</script>[................]
<!--inizio galleria -->
<div id="gallery">
<div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="915" height="150" /></div><!-- ILLUSTRAZIONI --><div id="slider">
<ul><li>
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li>
</ul>
</div><div id="advertising"><img src="Nuova cartella/image/WEB.png" width="900" height="150" /></div> <!-- WEB TEMPLATES -->
<div id="slider2"> <ul> <li> <a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm.png" width="335" height="280" /> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image22.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm2.png" width="335" height="280" /> </li> </ul>
</div>
Questo è ciò che ho provato a fare come da tuo suggerimento compresa la modifica al file .js.
In pratica è successo questo.
Le due gallerie si sono disposte correttamente.
Tutte e due hanno i pulsanti Prev e Next, solo che quelli appena sotto la prima galleria funzionano per la seconda!!Quelli sotto la seconda non sono sensibili!
-
Scusa, non avevo guardato bene il tuo penultimo codice che hai postato, mea culpa.
Prova a vedere se così funziona:
$(document).ready(function(){ $("#slider").easySlider({ prevText: 'Previous Slide', prevId: 'prevBut1', nextText: 'Next Slide', nextId: 'nextBut1', }); $("#slider2").easySlider(function(){ prevText: 'Previous Slide', prevId: 'prevBut2', nextText: 'Next Slide', nextId: 'nextBut2', }); });
-
Niente da fare!
mi da l'errore su questo rigo:prevId: 'prevBut2',
ed elimina completamente lo script.
-
Ehm, dovrei evitare i copia&incolla, togli la parte
function()
nella seconda chiamata di easySlider().
-
Tutto a posto....quasi!!
Succede che è tutto perfetto solo che i pulsanti funzionano tutti e due solo per la seconda galleria!<script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.packed.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'Previous Slide', prevId: 'prevBut', nextText: 'Next Slide', nextId: 'nextBut', orientation: 'horizontal' });
$("#slider2").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBut2',
nextText: 'Next Slide',
nextId: 'nextBut2',});
});</script>
-
Non saprei, vedo che nel tuo script usi la versione compressa di easySlider, significa che hai modificato anche il file easySlider.packed.js oltre a easySlider.js?
-
No non ho modificato il file easySlider.packed.js ma solo **easySlider.js **come da tuo suggerimento....dovrei modificarlo?..come?
-
Bella domanda.
Non so che tool hanno usato per comprimere easySlider.js in easySlider.packed.js.
Hai chiaramente due possibilità: usare il fle easySlider.js modificato, oppure comprimere quest'ultimo con un programma come yuicompressor (developer.yahoo.com/yui/compressor/ ) oppure come packer (dean.edwards.name/packer/ ).In pratica la modifica fatta deve essere presente anche nella versione packed, altrimenti non funziona con più slider.
-
L'errore era solo mio!!
Il motivo è che avevo modificato easySlider.js ma continuavo a usare easySlider.packed.js.!!!Che stupido!!
Ultima domanda,
Per personalizzare i pulsanti prev e next come bisogna agire?
-
@lucaeffe said:
L'errore era solo mio!!
Come hai visto, capita spesso anche a me.Per personalizzare i pulsanti prev e next come bisogna agire?
Credo sia possibile farlo tramite CSS via jQuery, con qualcosa (di orribile) del tipo :$("slider1").css({'background':'yellow'}); $("slider1" a).css('color':'red'});
Ma dovrebbe funzionare anche con il solo CSS...
-
Sai dove e come bisogna agire per modificare, anche con delle icone, i testi senza stile prev e next?