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 LIGHTBOX
La 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, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider 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>
[............]
<div id="gallery">
<div id="illustraction">[img]Nuova cartella/image/illustractio.png[/img]</div>
<div id="slider">
<ul>
[*]
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[*] <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[/list]
</div>
<div id="advertising">[img]Nuova cartella/image/WEB.png[/img]</div>
<div id="slider">
<ul>[*]
<a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist">
[img]JS/jquery-lightbox-0.5/photos/thumb_image17.png[/img] </a>
[img]JS/jquery-lightbox-0.5/photos/web_comm.png[/img]
[*]
<a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it">
[img]JS/jquery-lightbox-0.5/photos/thumb_image22.png[/img] </a>
[img]JS/jquery-lightbox-0.5/photos/web_comm2.png[/img]
[/list]
</div>
</div>
</div>
</body>
Rispondi quotando