Mit jQuery Lightbox mehrere Galerien erstellen ?

mint · 11.09.2010

Hallo, ich bin Anfänger in Sachen Webdesign und erarbeite mir gerade eine Website. Ich habe mit jQuery die Lightbox laufen (funktioniert auch soweit). Nun möchte ich aber mehrere Galerien einsetzen und das funktioniert nicht so einfach (wie ich mir das vorstelle).
Kann mir jemand etwas dazu sagen ?

Danke für Tipps, Gruß Mint

(Auszug aus dem html Code)

HTML:

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />
    <!-- jQuery lightBox plugin -->
    
    <!-- jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color:#fff*;
        padding: 1*0px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: block; padding-left: 28px;}
    #gallery ul img {
        border: 2px solid #CCC;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #;
        border-width: 5px 5px 20px;
        color: #F90;
    }
    #gallery ul a:hover { color: #F90; }
    
    
    </style>

HTML:

<div id="gallery">
        
    <ul>
        <li>
            <a href="imagesL/pic1.jpg" title="Danksagung zur Hochzeit"><img src="imagesL/gallerie1.jpg" width="150" height="75" alt="Galerie Button"/> </a>  </li>
                
            <li>
            <a href="imagesL/pic1b.jpg" title="Danksagung zur Hochzeit"> </a></li>
               
           <li>
            <a href="imagesL/pic2.jpg" title="Danksagung zur Hochzeit"> </a></li>
             
           <li>
            <a href="imagesL/pic2b.jpg" title="Danksagung zur Hochzeit"></a> </li>

         </div>
               
     </ul>

sokie · 11.09.2010

AW: Mit jQuery Lightbox mehrere Galerien erstellen ?

da hast du mit jquery alle Möglichkeiten, weil du ja im Aufruf verschiedene selektoren verwenden kannst:

Code:

    $(function() {         
      $('#gallery a').lightBox();
      $('#gallery2 a').lightBox();
    });

so könntest du im container <div id="gallery2"> dann eine weitere galerie unterbringen usw.

Bei deinem code könnte es sich auch anbieten es im selben container über das title attribut zu trennen:

Code:

    $(function() {         
      $('#gallery a[title|="Danksagung zur Hochzeit"]').lightBox();
      $('#gallery a[title|="Renovierung nach der Feier"]').lightBox();

    });

Selectors – jQuery API

mint · 11.09.2010

AW: Mit jQuery Lightbox mehrere Galerien erstellen ?

@sokie

Das funktioniert nicht, die lightbox läuft dann nicht mehr, wohl ein Fehler in meinem Code...

HTML:

<!-- jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a[title|="Danksagung zur Hochzeit"]').lightBox();

        $('#gallery a[title|="Geburtstagseinladung"]').lightBox();



    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color:#fff*;
        padding: 1*0px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: block; padding-left: 28px;}
    #gallery ul img {
        border: 2px solid #CCC;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #;
        border-width: 5px 5px 20px;
        color: #F90;
    }
    #gallery ul a:hover { color: #F90; }
    
    
    </style>
       
</head>
      
<body>
        
        <div id="container"> 
               
        <div id="bg-header">
   
        <img src="images/bg-header.jpg" />
        
        
        
        
        <div id="bg-navi"> 
        <img src="images/bg-navi.jpg" />
        
        
        
        <div id="hdMenu">
        
        <ul id="menu">
                  
            <li><a href="index.html">Home</a></li>

            <li><a href="produkte1.html">Produkte</a></li>

            <li><a href="referenzen.html">Referenzen</a></li>

            <li><a href="ueber_uns.html">Über uns</a></li>

            <li><a href="kontakt.html">Kontakt</a></li>

                  </ul>
                  
           
        </div>
        
        </div>
        
            
   <div id="sidebarAll">
     <div id="sidebarBottom">
       <div id="sidebarTop">
       
        <h3>Referenzen ...</h3>
        
        </div>
         </div>
           </div>
         
     
          <div id="mainContent"> 
          
         
         <div id="gallery a">
        
    <ul>
        <li>
            <a href="imagesL/pic1.jpg" title="Danksagung zur Hochzeit"><img src="imagesL/gallerie1.jpg" width="150" height="75" alt="Galerie Button"/> </a>  </li>
                
            <li>
            <a href="imagesL/pic1b.jpg" title="Danksagung zur Hochzeit"> </a></li>
               
           <li>
            <a href="imagesL/pic2.jpg" title="Danksagung zur Hochzeit"> </a></li>
             
           <li>
            <a href="imagesL/pic2b.jpg" title="Danksagung zur Hochzeit"></a> </
            
            <li>
            <a href="imagesL/einl_pic1.jpg" title="Geburtstagseinladung"><img src="imagesL/gallerie2.jpg" width="150" height="75" alt="Galerie Button"/> </a>  </li>
                
            <li>
            <a href="imagesL/einl_pic1b.jpg" title="Geburtstagseinladung"> </a></li>
               
           <li>
            <a href="imagesL/einl_pic2.jpg" title="Geburtstagseinladung"> </a></li>
             
           <li>
            <a href="imagesL/einl_pic2b.jpg" title="Geburtstagseinladung"></a> </li>
            
            <li>
            <a href="imagesL/einl_pic3.jpg" title="Geburtstagseinladung"> </a></li>
            
            <li>
            <a href="imagesL/einl_pic3b.jpg" title="Geburtstagseinladung"></a> </li>
           
             
             <li>
            <a href="imagesL/fly_pic1.jpg" title="Flyer"><img src="imagesL/gallerie3.jpg" width="150" height="75" alt="Galerie Button"/> </a>  </li>
                
            <li>
            <a href="imagesL/fly_pic1b.jpg" title="Flyer"> </a></li>
               
           <li>
            <a href="imagesL/fly_pic2.jpg" title="Flyer"> </a></li>
            
            <li>
            <a href="imagesL/fly_pic2b.jpg" title="Flyer"> </a></li>
                
           
           
                </div>
           </div>
                
              
               
     </ul>

sokie · 11.09.2010

AW: Mit jQuery Lightbox mehrere Galerien erstellen ?

es gibt wie gesagt eine ganze reihe von möglichkeiten. in der Dokumentatation sind noch weitere zu finden (bei weitem nicht alle)

Code:

<script type="text/javascript">
$(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

hier ist ein code fehler:

HTML:

<a href="imagesL/pic2b.jpg" title="Danksagung zur Hochzeit"></a> </

mint · 11.09.2010

AW: Mit jQuery Lightbox mehrere Galerien erstellen ?

@sokie

Nach viel probiererei habe ich es geschafft.

Danke für die Tipps.