madnet.ch - Rolf Klemenz » slimbox http://www.madnet.ch because technology matters Thu, 06 Oct 2011 19:02:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Gallery Included http://www.madnet.ch/2009/02/28/gallery-included/ http://www.madnet.ch/2009/02/28/gallery-included/#comments Sat, 28 Feb 2009 08:34:49 +0000 Rolf http://www.madnet.ch/2009/02/28/gallery-included/ Continue reading →]]> 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");
});
]]> http://www.madnet.ch/2009/02/28/gallery-included/feed/ 0