• User Attivo

    jquery-lightbox-0.5 funziona solo per la prima galleria

    Come da titolo ho diverse gallerie ma il lightbox funziona solo per la prima.

    Pe la seconda non c'è bisogno ma per la terza e la quarta non funziona proprio.

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="PORTFOLIO.css" rel="stylesheet" type="text/css" />
                 
    <title>Lucaeffe.it</title> 
    
    <script src="smoothscroll_dl/smoothscroll.js" type="text/javascript"></script>
    
    
    <!-- jQuery lightBox plugin -->
        <script type="text/javascript"  src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
    <script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
        
        
        <link rel="stylesheet" type="text/css" href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />
        <script type="text/javascript">
        $(function() {
            $('#gallery a').lightBox();
        });
        </script>
       <!--fine jQuery lightBox plugin --> 
       
       
       
       
       <!-- inizio jQuery w.slide plugin -->
        <script  src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                    
                    $("#parent2").wslide({
                        width: 750,
                        height: 250,
                        fade: true,
                        duration: 2000
                       }); 
                    }); 
    
        </script>
        
        
    
        <script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.js"></script>
         <script type="text/javascript">
        $(document).ready(function(){
        
        $("#slider").easySlider({
            prevText:'<',
            prevId: 'prevBtn',
            nextText: '>',
            nextId: 'nextBtn',
            orientation: 'horizontal'
    
            
                            
                                
        });
        
       $("#slider2").easySlider({
           prevText: '<',
           prevId: 'prevBtn2',
           nextText: '>',
           nextId: 'nextBtn2',
    
        });
       
           
       $("#slider3").easySlider({
           prevText: '<',
           prevId: 'prevBtn3',
           nextText: '>',
           nextId: 'nextBtn3',
    
        });
        
    });
    
        </script>
    
        
        
        
        
        
        
    
    
    
    
        <style type="text/css">
        /* jQuery lightBox plugin - Gallery style */
        #gallery{
            margin:15px 0 0 0;
            width:100%;
            height:500px;
            text-decoration:none
        }
        
        a{
            font-family:Arial, Helvetica, sans-serif;
            color:#FFF;
            text-decoration:none;
            }
            
        ul { 
            list-style: none;
            padding:100px 0 0 50px;
            margin:0 0 50px 0
        }
        ul li { 
            display: inline;
        }
        ul img {
            margin:0 auto;
            border: 5px solid #3e3e3e;
            border-width:0;
        }
        ul a:hover img {
            border: 1px solid none;
            border-width:0;
            color: #fff;
        }
        ul a:hover { color:;
        }
        
        </style>
        
    <!-- inizio jQuery w.slide gallery -->
    <style type="text/css" media="screen">
                    
                    
                #parent2-menu{
                    text-decoration:none;
                
                    }
                li{
                    padding:30px 0 0 75px;
                    margin:0 auto;
    
                }
                
                li{
                    margin:0;
                    padding: 20px 0 0 70px;
                    font-family:Arial, Helvetica, sans-serif;
                    color:#333;
                    font-size:12px;
                    }
    
                a{
                    text-decoration:none;
                    font:Arial, Helvetica, sans-serif;
                    color:#000;
                }
                a:hover, a.wactive{
                    text-decoration:none;
                    background: black;
                    color:#000;}
                    </style>
                 
    
    
    </head>
    
    
    
    
     
    
    
    <body>
    <a name="top"></a>
    
    
    <div id="sfondo_fisso"></div>
    <div id="spazio"></div>
    <div id="container"> 
    
      <div id="header">
      <div id="barra_luminosa"></div>
      </div>
        
     <ul id="menu">
    <li><a href="#p1"><strong>illustraction</strong></a></li>
    <li><a href="#p2"><strong>web</strong></a></li>
    <li><a href="#p3"><strong>logo</strong></a></li>
    <li><a href="#p4"><strong>advertising</strong></a></li>
    </ul>
    
    
    
    
    
    <div id="header2">
      <ul class="welcome"> 
      <li><a href="#parent2-1"><strong>Welcome</strong></a></li>
      <li><a href="#parent2-2"><strong>About me</strong></a></li>
      <li><a href="#parent2-3"><strong>Services</strong></a></li>
      <li><a href="#p5"><strong>Contact</strong></a></li>
      </ul>  
      
      
      
      
     <!-- testi per il w.slide--> 
      
    <ul id="parent2">
        <li>
          <h1><img src="image/welcometext.png" width="700" height="50" /></h1>
          <strong>Ciao,sono Luca Faedda grafico,illustratore e web-designer.Attualmente vivo a Firenze.
          Appassionato al mondo dell'illustrazione, graphic-design, grafica pubblicitaria e della programmzione di siti web e web-design.
          L'obiettivo è quello di creare siti accessibili e dal design efficace con l'utilizzo di xHTML,CSS,JavaScript e Flash 
          con particolare attenzione agli standard dettati dalla W3C e al ?cross-browser?; </strong></li>
        
        <li><h1><strong><img src="image/aboutmetext.png" width="680" height="60" /></strong></h1>
          <strong> Diplomato all'istituto Statale d'arte F.Figari di sassari,
          frequento ora l'Accademia delle arti digitali<span class="wait"><a href="http://www.scuolanemo.com/index.php?menu=6&amp;umenu=FAQ's&amp;page=FAQ's&amp;pagina=" target="_blank">NEMO NT.</a></span></strong></li>
       
        <li><h1><img src="image/services.png" width="530" height="60" /></h1>
        <strong>
        Web design, realizzazione siti internet, xHtml, Css.  Dal design allo sviluppo per il tuo sito sino
        all'ottimizazzione sui motori di ricerca.
        
        Illustrazioni su commissione,caricature,grafiche per t-shirt, skate, tavole da surf personalizzate.
        Loghi, Brochure, volantini, business card per migliorare la tua immagine.
        
        </li>
      </ul>
     </div>  
    <!-- fine testi per il w.slide-->
    
    
    
    <!--inizio galleria -->
    
    
    
    
    <div id="illustraction"><img src="image/illustractio.png" width="900" height="150" /><a name="p1"></a></div><h2><a href="#top">^</a></h2><!-- ILLUSTRAZIONI -->
    
    
    <div id="gallery">
      <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>
             
    
                
    <div id="advertising"><img src="image/WEB.png" width="900" height="170" /><a name="p2"></a></div><h2><a href="#top">^</a></h2>  <!-- WEB TEMPLATES -->  
    <div id="gallery">
        <div id="slider2">
                <ul>         
                <li>
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="765" height="280" alt="" /> </a>          
                </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 id="advertising"><img src="image/logos.png" width="900" height="152" /> <a name="p3"></a></div><h2><a href="#top">^</a></h2><!-- LOGO -->
        
        
        
    <div id="gallery">
    <div id="slider3">
        <ul>
        <li>
          <a href="JS/jquery-lightbox-0.5/photos/image18.jpg" title="contest 'lovely crociere' grafici creativi.it">
            <img src="JS/jquery-lightbox-0.5/photos/thumb_image18.png" width="200" height="140" alt="" />
            </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image19.jpg" title="Nemoland-dietro le quinte della fantascienza e del fantasy">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image19.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image20.jpg" title="lucaeffe logo">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image20.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image23.jpg" title="NEMO NT - Colori puri">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image23.png" width="200" height="140" alt="" />
                </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
          </li> 
          </ul>
          </div>
          </div>
    
    
        
    <div id="advertising"><img src="image/advertising.png" width="915" height="150" /><a name="p4"></a></div><h2><a href="#top">^</a></h2><!-- ADVERTISING -->
          <div id="gallery">
                 <ul>
                 <li>
                <a href="JS/jquery-lightbox-0.5/photos/image9.jpg" title="esercizi di sintesi - China">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image9.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image10.jpg" title="esercizi di sintesi - Musica">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image10.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image11.jpg" title="esercizi di sintesi - Mare">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image11.png" width="200" height="140" alt="" />
                </a>   
    
                <a href="JS/jquery-lightbox-0.5/photos/image12.jpg" title="esercizi di sintesi - Estate">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image12.png" width="200" height="140" alt="" />
                </a>  
    
                <a href="JS/jquery-lightbox-0.5/photos/image13.jpg" title="esercizi - Carattere come immagine">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image13.png" width="200" height="140" alt="" />
                </a> 
    
                <a href="JS/jquery-lightbox-0.5/photos/image14.jpg" title="esercizi di reinterpretazione - Pin up '50">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image14.png" width="200" height="140" alt="" />
                </a> 
    
                <a href="JS/jquery-lightbox-0.5/photos/image15.jpg" title="esercizi di reinterpretazione - Pop Art">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image15.png" width="200" height="140" alt="" />
                </a>   
                
    
                <a href="JS/jquery-lightbox-0.5/photos/image16.jpg" title="contest 'No al Fumo' Grafici creativi.it">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image16.png" width="200" height="140" alt="" />
                </a>                                                      
      </li>
      </ul>
    
          
    
    </div>
    
    
    
    <div id="advertising"><img src="image/contactme.png" width="915" height="152" /><a name="p5"></a></div><h2><a href="#top">^</a></h2>
    
    <div id="modulo"><form id="contact" method="post"  action="webmailsemplice/webamilsemplice/invio.php">
      <div>
            <label for="email"></label>
        <div class="input-cont"><input type="text" id="email" name="email"></div>
        
        <label for="nome"></label>
        <div class="input-cont"><input type="text" id="nome" name="nome" size="20"></div>
        
        <label for="message"></label>
        <div class="input-cont"><input type="text" id="object" name="object"></div>
        
        <label for="message"></label>
        <div class="textarea-cont">
          <textarea id="message" name="message" rows=9 cols=20></textarea>
        </div>
        <button type="submit" id="go" value="invia">CLICK HERE</button>
      </div>
    </form> </div>
    
    
    </div>
    <div id="footer">
    </div>
    </body> 
    
    

    CSS

    @charset "utf-8";
    /* CSS Document */
    
    body{
        background:#000;
        background-image:url(image/clouds.png);
        background-position:top;
        background-repeat:no-repeat;
        margin:0 auto;
        padding:10px 0 0 0;
        height:100%;
        width:1263px;
    } 
    
    #spazio{
        height:120px;
        width:950px;
        margin:0 auto;
        padding:0;}
    
    
    #container{
        background-color:#000;
        background-repeat:repeat-y;
        background-position:center;
        width:950px;
        height:5030px;
        margin:0 auto;
        padding:40px 0 20px 0;
        
    }
    
    #header{
        background-image:url(image/hea2.png);
        background-repeat:no-repeat;
        background-position:top;
        margin:0;
        padding:0;
        height:250px;
        width:950px;
    }
    
    #barra_luminosa{
        background-image:url(image/Barr_luminosa_centro.png);
        height:30px;
        width:950px;
        margin:215px 0 0 0;
        padding:0;
        position:absolute;
    }
    
    #header2{
        background-image:url(image/welcome.png);
        background-repeat:no-repeat;
        padding:0;
        width:950px;
        height:330px;
        margin:300px 0 0 0;
    }
    
    
    
    #menu{
        list-style:none;
        overflow:hidden;
        width:950px;
        height:35px;
        float:left;
        padding:1px;
        margin:0;
        background-color:#0e0e0e;
    
    }
    
     li{
        display:inline;
    } 
    
     a{
        display:block;
        float:left;
        padding-rigth:90px;
        margin-left:60px;
        padding-left:65px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:16px;
        text-transform:uppercase;
        text-decoration:none;
        color:#FFF;
        line-height:25px;
    }
     a:hover{
        color:#FC0;
        
    } 
    
    
    
    .welcome{
        list-style:none;
        display:block;
        width:950px;
        height:25px;
        margin:0 0 -20px 0;
        padding:0;
    
    
    }
    
    
    .welcome li{
        display:inline;
            width:300px;
    } 
    
    
    .welcome a{
        display:block;
        float:left;
        padding-rigth:60px;
        height:25px;
        margin-left:30px;
        margin-top:20px;
        padding-left:20px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        text-decoration:none;
        color: #FC0;
        line-height:25px;
    }
    
    .welcome a:hover{
        color:#FFF;
        
    } 
    
    h1{
        font-family:Arial, Helvetica, sans-serif;
        font-size:36px;
        color:#FFF;
        margin:15px 0 0 0;
        padding:0 0 35px 0;
        top:-90px;
    }
    
    h2{
        font-family:Arial, Helvetica, sans-serif;
        font-size:36px;
        margin:-40px 0 0 800px
        }
        
    h2 li{
        display:inline;
    }
    
    h2 a{
        text-decoration:none;
        color:#FFF}
        
        
    
    
    #illustraction{
        margin:250px 0 0 30px;
        padding:0;
    }
    
    #advertising{
        margin:150px 0 0 30px;
        padding:0;
    }
    
    #template{
        margin:0 0 0 -10px;
        padding:0;
        width:850px;
        height:280;
    
    }
    
    
    .wait{
        list-style:none;
        display:block;
        width:70px;
        height:25px;
        margin:0;
        padding:0;
    
    
    }
    
    
    .wait li{
        display:inline;
            width:300px;
    } 
    
    
    .wait a{
        display:block;
        float:left;
        height:25px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        text-decoration:none;
        color: #FFF;
        line-height:25px;
    }
    
    .wait a:hover{
        color:#FC0;
        
    } 
    
    
    #web_space{
        padding:0;
        margin:0 0 150px 0;
    }
    
    
    
    
    
        #slider ul{
            margin:0;
            padding:0;
            list-style:none;
            }
       {
            background-image:url(image/contorno_thumb.png);
            width:900px;
            height:430px;
            overflow:hidden; 
            }
            
        li{
    
            width:900px;
            height:400px;
            overflow:hidden; 
            }
        span#prevBtn{
            margin:0 0 0 50px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
        span#nextBtn{
            margin:0 0 0 780px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
    
        
        #slider2{
            background-image:url(image/contorno_thumb.png);
            width:900px;
            height:430px;
            overflow:hidden; 
            }
        ul{
            margin:0;
            padding:0;
            list-style:none;
            }
        li{
    
            width:900px;
            height:400px;
            overflow:hidden; 
            }
        span#prevBtn2{
            margin:0 0 0 50px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
        span#nextBtn2{
            margin:0 0 0 780px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
        
    
            #slider3 ul{
            margin:0;
            padding:0;
            list-style:none;
            }
       {
            background-image:url(image/contorno_thumb.png);
            width:900px;
            height:430px;
            overflow:hidden; 
            }
            
        li{
    
            width:900px;
            height:400px;
            overflow:hidden; 
            }
        span#prevBtn3{
            margin:0 0 0 50px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
        span#nextBtn3{
            margin:0 0 0 780px;
            font-size:24px;
            font-family:Arial, Helvetica, sans-serif;}
    
        
        
        #contact_me{
            background:url(image/contactme.png);
            height:150px;
            width:700px;
            margin:100px 0 0 0;
            padding:0;
        
        }
        
        #modulo{
            margin:0 0 -400 75px;
        }
        
        form#contact{
            width:900px;
            height:380px; 
            margin: 0;
            padding: 47px 15px 10px 15px;
            background-image:url(image/form.png);
            background-repeat:no-repeat;
        } 
        
        label{
            width: 200px;
            height: 30px;
            font: 12px/30px Arial,sans-serif;
            margin-right: 5px;
            text-align: right;
            color: #666
            } 
            
        input,textarea,button{
            border: 0px solid;
            font: 12px Arial,sans-serif;
            } 
                
                
        div.input-cont{
            width: 200px;
            height: 30px;
            margin:0;
            padding:0;
            } 
            
        input{
            display: block;
            width: 200px;
            height:25px;
            background:#FFF;
            margin:20px 0 0 270px;
            } 
            
            #message{
                margin:50px 0 0 170px;}
                
    
            
    
            
        div.textarea-cont{
            width: 200px;
            height: 100px;
            padding:0;
            }
    
        textarea{
            width: 280px;
            height: 85px;
            margin: 33px 0 0 180px;
            } 
            
        button#go{
            width: 200px;
            height:20px;
            line-height: 25px;
            display: inline;
            margin:14px 0 0 550px;
            padding:0;
            background: #ffcc00;
            font:Arial, Helvetica, sans-serif;
            font-weight:bolder;
            font-size:16px;
            text-transform:uppercase;
            color:#000;
            cursor:pointer;
            } 
            
            
            
            #footer{
                background-image:url(image/footer1.png);
                height:200px;
                width:950px;
                margin:0 auto;
                padding:20px 0 0 0;
    }
                
    
    

    Grazie a tutti!


  • User Attivo

    Provo ad essere piu chiaro:

    Come potete vedere dal codice sono presenti varie gallerie rinchiuse tutte dal div gallery.

    Ho dovuto fare in questo modo perche se le rinchiudo tutte in un unico div gallery il light box entra il conflitto con il pulsante "top" facente parte dello script smooth scroll ed ogni volta che lo premo si attiva il lightbox.

    Quindi la soluzione che pensai fu proprio di fare per ogni sezione di immagini un altro div gallery in modo che il bottone "top" ne restasse fuori...

    La soluzione infatti funziona se non fosse per il fatto che il lightbox funziona solo per la prima galleria ma non per le altre......

    Questo non riesco a spiegarmelo in maniera e logica e quindi non riesco a trovare una soluzione!image


  • User Attivo

    La risposta è più semplice di quanto sembra: in un albero HTML non posso esserci più elementi con lo stesso ID, quindi non puoi avere due elementi con id='gallery' perchè comunque il DOM ritorna solo il primo e quindi jquery applica il tutto solo al primo.


  • User Attivo

    classi?


  • User Attivo

    O gli dai id diversi (tipo gallery1, gallery2 etc) e poi fai:

    $('#gallery1 a, #gallery2 a, #gallery3 a').lightBox();

    O dai una classe e richiami quella.


  • User Newbie

    @Senamion said:

    O gli dai id diversi (tipo gallery1, gallery2 etc) e poi fai:

    $('#gallery1 a, #gallery2 a, #gallery3 a').lightBox();

    O dai una classe e richiami quella.

    GRANDE!!! Avevo lo stesso problema e grazie a te ho risolto!:bigsmile: