Isotope expand/contract feature

Question

I'm working on an isotope - which I want to get as close to the mcdonald example as the pane expands and opens up.

http://www.mcdonalds.de/produkte/alle-produkte

http://jsfiddle.net/9zX6z/1/

I have a class that sets the height/width

$(".element-item").on("click", function() {
                that.highlightBlock($(this));

                $("#filter").click();
            });

Answer 1

You already nailed the basics - setting the width and height for the "expanded"/"open" Isotope element via a CSS class open

<li class="product open">

and then trigger Isotope's reLayout-method.

The zooming of the product image is implemented via CSS transitions depending on the presence of said class:

.product-image {
    width: 148px;
    height: 148px;
    transition: all 0.4s ease-in-out;
}

.product.open .product-image {
    width: 308px;
    height: 308px;
}

But just blowing up the thumbnail image dimensions wouldn't look very nice: Before adding open to the Isotope element, we thus replace the thumbnail image's src-attribute with the URL to a bigger version of the product image. The latter is stored in the data-src-large-attribute of the image:

<img class="product-image" data-src-large="product_preview.png" src="product_thumbnail.png" data-src-standard="product_thumbnail.png">

The implementation on the McDonalds product page also adds a CSS-class item-open to the parent container within which the Isotope items are contained:

<ul id="isotope" class="isotope item-open">
    <li class="product open"> ...
    <li class="product"> ...
    ...

Based on this class, the opacity of all Isotope-items which do not have the open class assigned is reduced, again via CSS:

.item-open .product {
    opacity: 0.15;
}

.item-open .product.open {
    opacity: 1;
}

You can see CodePens fitting the code-snippets above here: http://codepen.io/fk/pen/dGAzl/ (using Isotope v1) and http://codepen.io/fk/pen/ohLvF/ (using Isotope v2) - both a bit rough around the edges, but working in the latest Chrome.

Please note that I used spin.js to display the loading indicator, slightly changed the CSS class names and left out a bunch of markup, vendor prefixes and IE-specific filters as opposed to the original McDonalds product page to make things a bit easier to grasp (hopefully ;)) - everything else is almost a 1:1 copy.

Also note that the imagesLoaded-plugin that comes bundled with Isotope v1 has its problems and you'll be probably better off using the current standalone version of the plugin if you want to use it to determine when the high resolution product image is loaded.

The jsFiddle JavaScript contains a few comments to help you around.
I hope combined with the answer here, this gives you a few pointers on how to move on from where you currently are.