gallery easy slider

[lucaeffe]

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, 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>

[dotcom]

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'});

[lucaeffe]

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!

[dotcom]

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.

[lucaeffe]

<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!

[dotcom]

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',
});
});

[lucaeffe]

Niente da fare!
mi da l'errore su questo rigo:

prevId: 'prevBut2',

ed elimina completamente lo script.

[dotcom]

Ehm, dovrei evitare i copia&incolla, togli la parte

function()

nella seconda chiamata di easySlider().

[lucaeffe]

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>

[dotcom]

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?

[lucaeffe]

No non ho modificato il file easySlider.packed.js ma solo **easySlider.js **come da tuo suggerimento....dovrei modificarlo?..come?

[dotcom]

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.

[lucaeffe]

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?

[dotcom]

@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...

[lucaeffe]

Sai dove e come bisogna agire per modificare, anche con delle icone, i testi senza stile prev e next?