site-media/scripts/stevelosh-gallery.js @ 37bd34b1c710

Add aardvark legs to make the CSS stronger.
author Steve Losh <steve@stevelosh.com>
date Thu, 16 Jul 2009 18:39:14 -0400
parents 24ce70aa9934
children (none)
$(function() {
    $('div.gallery').each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == Node.TEXT_NODE;
        }).remove();
        
        var cols = 4;
        var padding = 10;
        var total_width = $(this).width();
        var width = (total_width / cols) - 2 * padding;
        $(this).find('img').css({width: width, margin: padding});
        
        $(this).before('<div class="gallery-pane"></div>');
        $(this).find('img:first').clone()
                                 .addClass('gallery-display')
                                 .css({width: '', margin: ''})
                                 .appendTo('div.gallery-pane');
    });

    $('div.gallery img').click(function() {
        var new_image = $(this).clone()
                               .addClass('gallery-display')
                               .css({width: '', margin: '', display: 'none'});
        $('img.gallery-display').fadeOut('fast', function() {
            $(this).remove();
            new_image.appendTo('div.gallery-pane').fadeIn('slow');
        });
    });
});