gallery easy slider

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

$("#slider").easySlider({
    prevText: 'Previous Slide',
    nextText: 'Next Slide',
    orientation: 'horizontal'
                    
                        
});

    $("#slider2").easySlider({
    prevText: 'Previous Slide',
    nextText: 'Next Slide',
    orientation: 'horizontal'
                    
                        
});

});
</script>

[................]

<div id="gallery">
<div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="915" height="150" /></div>

<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="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?