Recurso de expansão/contração de isótopos

Question

Estou trabalhando em um isótopo - que quero chegar o mais próximo possível do exemplo do McDonald's à medida que o painel se expande e se abre.

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

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

Eu tenho uma classe que define a altura/largura

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

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

Answer 1

Você já acertou o básico - definindo a largura e a altura do elemento Isotope "expandido"/"aberto" por meio de uma classe CSS open

<li class="product open">

e então acionar o isótopo reLayout-método.

O zoom da imagem do produto é implementado através de transições CSS dependendo da presença da referida classe:

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

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

Mas apenas aumentar as dimensões da imagem em miniatura não ficaria muito bom: Antes adicionando open ao elemento Isotope, substituímos assim a imagem em miniatura src-atributo com o URL para uma versão maior da imagem do produto.Este último é armazenado no data-src-large-atributo da imagem:

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

A implementação na página do produto McDonalds também adiciona uma classe CSS item-open ao contêiner pai no qual os itens Isotope estão contidos:

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

Com base nesta classe, a opacidade de todos os itens isótopos que não não tenha o open a classe atribuída é reduzida, novamente via CSS:

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

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

Você pode ver CodePens ajustando os trechos de código acima aqui: http://codepen.io/fk/pen/dGAzl/ (usando Isótopo v1) e http://codepen.io/fk/pen/ohLvF/ (usando Isotope v2) - ambos um pouco ásperos, mas funcionando no Chrome mais recente.

Observe que usei spin.js para exibir o indicador de carregamento, alterei ligeiramente os nomes das classes CSS e deixei de fora um monte de marcações, prefixos de fornecedores e filtros específicos do IE, em oposição à página original do produto McDonalds, para tornar as coisas um pouco mais fáceis. compreenda (espero;)) - todo o resto é quase uma cópia 1:1.

Observe também que o plugin imagesLoaded que vem fornecido com Isótopo v1 tem a sua problemas e provavelmente será melhor usar o atual versão autônoma do plugin se desejar usá-lo para determinar quando a imagem do produto de alta resolução será carregada.

O JavaScript jsFiddle contém alguns comentários para ajudá-lo.
Espero que, combinado com a resposta aqui, isso lhe dê algumas dicas sobre como seguir em frente de onde você está atualmente.