dynamicinternet Wir machen Ihr Web dynamisch!

jQuery Script für die Galerie

geschrieben von Micha am 09. März 2008 | kein Kommentar

Nochmal was zur Fotogalerie. Nachdem jetzt 3 Galerien online sind, ist mir eine Idee gekommen. Wenn eine Galerie sehr viele Bilder hat, sieht es nicht so toll aus, wenn alle auf einer Seite stehen. Bei den Portalen werden es bistimmt über 70 Bilder, wenn ich je dazu komme, sie zu bearbeiten .
Mehrere Seiten für eine Galerie zu erstellen will ich nicht, also habe ich mit jQuery ein kleines Script geschrieben. Zu sehen ist es in der Holzbalkendecken-Galerie.

Hier eine kurze Erklärung des Scripts:
Die Galerie selber ist nur eine ungeordnete Liste und sieht wie folgt aus:

<ul class="thumbgallery floatbox">
 <li>
 	<a href="...bild.jpg" title="bla" rel="lightbox[holzbalkendecken]">
 		<img src="...bild.thumbnail.jpg" alt="foo">
 	</a>
 </li>
 ...
</ul>

Zuerst lege ich die Anzahl der Listenelemente pro Liste fest. Dann werden die Listenelemente gezählt. Sind es weniger Elemente wie die vorgegebene Anzahl, macht das Script nichts mehr.
Dann bekommt die Liste erstmal die id #list-0. Im nächsten Schritt werden 2 Divs erzeugt und eine ungeordnete Liste, die die “Tab-Links” enthalten werden. Danach wird die Anzahl der benötigten Listen errechnet und neue Listen erstellt mit jeweils soviel Elementen, wie in Anzahl angegeben sind und die Anker für die Tabs werden erzeugt. Der Rest ist dann nur noch Ein- und Ausblenden der Listen sowie die Vergabe einer Klasse current für das jeweils aktive Tab.
Die 2 Zeile $jq = jQuery.noConflict(); habe ich nur, weil es sonst Probleme mit der Lightbox gibt. Ansonsten kann man statt $jq nur $ schreiben.

Falls einer kein Javascript hat, wird natürlich die vollständige Liste mit Bildern angezeigt. Er büßt lediglich ein bischen Komfort ein. Hier noch das Script:

$(function() {
    $jq = jQuery.noConflict();
    var anzahl = 24;
    var listcount = $jq('.thumbgallery').children().length;
    if( listcount >= anzahl) {
        $jq('ul.thumbgallery').attr('id', 'list-0');
        $jq('ul.thumbgallery').wrap('<div id="mytabs"></div>');
        $jq('<div id="tabhead" class="floatbox"></div>').prependTo('#mytabs');
        $jq('<ul id="tabs"></ul>').appendTo('#tabhead');
        var listen = Math.ceil(listcount/(anzahl));
        for(i=0; i < listen; i++){
            $jq('<ul id="list-'+ (i+1) +'" class="thumbgallery floatbox"></ul>')
                .insertAfter('#list-' + i);
            $jq('<li><a href="#list-' + i +"'>Galerie " + (i + 1) + "</a></li>\n").appendTo('#tabs');
        };
        $jq('#mytabs > ul:first > li').each(function(index){
            $jq(this).appendTo('#list-' + Math.floor(index/anzahl));
        });
        $jq('.thumbgallery').hide();
        $jq('.thumbgallery:first').show();
        $jq('#tabs>li:first').addClass("current");
        $jq('#tabs>li>a').each(function(i){
            $jq(this).click(function(event){
                $jq('#tabs>li.current').removeClass("current");
                $jq(this).blur().parent().addClass("current");
                $jq('#mytabs > ul:visible').hide();
                $jq('#list-'+ i).show();
                event.preventDefault();
            });
        });
    };
});

Nicht vergessen, die jquery-1.2.3 Library einzubinden. Wer Lust hat, kann das Ganze auch mit einer normalen Liste nachvollziehen. Einfach ein kleines Script nehmen, was eine lange Liste erzeugt:

<ul class="thumbgallery">
<?php
for ($i=0; $i<60; $i++): ?>
<li><?php echo $i; ?></li>
<?php
endfor;
?>
</ul>

Viel Spass beim Ausprobieren.