• User Attivo

    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>


  • User

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


  • User Attivo

    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!


  • User

    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. :wink3:


  • User Attivo

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


  • User

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

  • User Attivo

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

    prevId: 'prevBut2',

    ed elimina completamente lo script.


  • User

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

    
    function()
    
    

    nella seconda chiamata di easySlider().


  • User Attivo

    😄

    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>

  • User

    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?


  • User Attivo

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


  • User

    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.


  • User Attivo

    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?


  • User

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


  • User Attivo

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