Antworten auf deine Fragen:
Neues Thema erstellen

Mit jQuery Lightbox mehrere Galerien erstellen ?

mint

Nicht mehr ganz neu hier

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>
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

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

Nicht mehr ganz neu hier

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

Mod | Web

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> </
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben