Tag Archives: jQuery

Gallery Included

Posted on by
Reply

I also included a small gallery to the site. The gallery content comes from my images server through a php script and the presentation is done using jQuery with livequery and slimbox2.

I had to use livequery because I wanted to add a lightbox effect to the asynchronously loaded DOM for the gallery content. That’s a common problem when dealing with ajax.

This is how it looks like now:

<head>
    <script type="text/javascript" src="http://js.madnet.ch/jquery-min.js"></script>
    <script type="text/javascript" src="http://js.madnet.ch/madnet-common.js"></script>
    <script type="text/javascript" src="http://js.madnet.ch/madnet-wordpress.js"></script>
    <script type="text/javascript" src="http://js.madnet.ch/jquery.livequery.js"></script>
    <script type="text/javascript" src="http://js.madnet.ch/slimbox/js/slimbox2.js"></script>
</head>
...
jQuery( function() {
    $("#g .gallery").livequery(function() {
        $(this).children("a").slimbox();
    });
    $("#g .galleryContainer").livequery(function() {
        $(this).click(function() {
            $(this).children(".gallery").slideToggle("slow");
        });
        $(this).children(".gallery").slideUp("slow");
        $(this).children("h3").hover(function() {
            $(this).fadeOut(100);$(this).fadeIn(500);
        });
    });
    $("#g").load("/galleryImages/AllImages.php");
});