Question

I’m trying to create a gallery, but being totally new to jQuery I’m in a kind of deadlock.

I want to create a gallery consisting of several small pictures that expand to full width on click and return to its original on another. At the same time I want all the rest divs in parent wrap to hide while clicked image expands. All that must be running smoothly and prettily. That’s what I can’t reach.
All pics have .image class and each of them has class .one .two and so on. They are all under parent wrap.

$(".image").bind('click', function() {
     $(this).animate({width: "100%", height: "100%"}, 800);
$(".image").not(this).hide("slow");
});

$('.image').toggle(function(){
    $(this).animate({width: "100%", height: "100%"}, 800);    
}, function(){
    $(this).animate({width: "90px", height: "90px"}, 800);
    $(".image").not(this).show("slow");
});

The result of my efforts by now http://jsfiddle.net/baltar/TRuNv/4/

Good example of smoothness here http://css-tricks.com/examples/InfoGrid/

Also, it would be great to set up adjusting the height of parent div on the fly, so image of any proportions will fit. I’ve tried to set parent’s height to auto, but that didn’t work.

I realize that my question is to big to ask, but maybe at least anyone could advise which direction should I look to.

Thanks in advance!

Answer 1

The following jQuery does most of what you request:

$(".image").bind('click', function() {
    var that = $(this), // caching the current element
        offsets = that.position(), // edited to use position() instead of offset()
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(), // caching the parent element
        width = parent.width(),
        height = parent.height();

    // adding the 'clone' element to the parent, and adding the 'clone' class-name    
    clone.addClass('clone').appendTo(parent).css({
        // positioning the element at the same coordinates
        // as the current $(this) element
        'top': top,
        'left': left
    }).animate({
        // animating to the top-left corner of the parent, and
        // to the parent's dimensions
        'top': 0,
        'left': 0,
        'width': width,
        'height': height
    }, 1000).click( // binding a click-handler to remove the element

    function() {
        // also fading the sibling elements back to full opacity
        $(this).fadeOut().siblings().animate({
            'opacity': 1
        }, 1000);
    }).siblings().animate({
        // fading-out the sibling elements
        'opacity': 0.1
    }, 1000);

});​

This requires the CSS:

.wrap {
    /* your other unchanged CSS, and: */
    position: relative;
}
.clone {
    position: absolute;
}

JS Fiddle demo.

References:

• addClass().
• animate().
• click().
• clone().
• fadeOut().
• height().
• offset().
• parent().
• position().
• siblings().
• width().