CODEWITHSUNDEEP
jquery
Max
Max

Reputation: 841

Expand a LI item and reorder the rest of them

I'm trying to make the following effect in jQuery:

Description.

I have a list of LIs with thumbnails for each. When I click the thumbnail, I'm animating the width of that LI to include a big image (e.g. from 300px to 972px; something like jQuery Popeye plug-in effect).

Each LI has a fixed width of 300px and a "nomarginright" appended via nth-child in jQuery (the 3rd item in a row must have that class).

Issues.

If I click the first LI in a row, it expands without going beyond its container. But if I click the 2nd, it expands beyond its container and it is leaving the 1st LI on the first row while the 3rd is on another row with "nomarginright" class attached (thus having no space between the 3rd and the 4th).

  1. How do I expand the LI in a row and reorder the inactive LI items once I click a thumbnail (reseting the "nomarginright" effect, too)?

A desired solution will be: in that row, move the active LI before any inactive LI and reset the nomarginright.

    $('#portfolio ul li div.picture a').each(function() {

    $(this).click(function() {
        $(this).parent().animate({
            width: 972,
            height: 504
        }, 2000);

        $(this).parents('li').addClass('active').animate({
            width: 972
        }, 2000);

        return false;
    });

HTML:

<li>
<div class="picture">
<a href="includes/pictures/portfolio-client-2.png" title="#"><img src="includes/pictures/portfolio-client-1.png" alt="#" /></a>
</div><!-- end .picture -->
</li>

The above just gets repeated in a UL.

Upvotes: 2

Views: 419

Answers (2)

Kato
Kato

Reputation: 40582

EDIT I one-upped my own solution by just absolute positioning the a tag; no clone required. To do this, you simply need to set a width on the li and then you can resize the a outside its bounds.

Here's the new, uber-ultra-deluxe fiddle

Old Approach

I achieved what I think is your desired result by simply cloning the a tag and appending it to the same li with absolute positioning. Then I animate the clone instead ;)

Check it out in this fiddle.

Upvotes: 0

hoopyfrood
hoopyfrood

Reputation: 675

I have concluded something along these lines from your description: http://jsfiddle.net/UMZhu/15/.

Let me know! ;)

PS: just noticed the thumbnails stack up, an error I overlooked due to my resolution. Playing with the CSS should offer the desired solution.

PPS: fixed the CSS layout issue. It can be simplified a little bit more, but this should get you started. Hope I'm not barking up the wrong tree here.

Upvotes: 1

Related Questions