Función de expansión/contracción de isótopos

Question

Estoy trabajando en un isótopo, que quiero acercarme lo más posible al ejemplo de McDonald a medida que el panel se expande y abre.

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

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

Tengo una clase que establece el alto/ancho.

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

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

Answer 1

Ya entendiste lo básico: configurar el ancho y el alto para el elemento isótopo "expandido"/"abierto" a través de una clase CSS open

<li class="product open">

y luego activar el isótopo rediseño-método.

El zoom de la imagen del producto se implementa mediante transiciones CSS dependiendo de la presencia de dicha clase:

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

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

Pero simplemente ampliar las dimensiones de la imagen en miniatura no se vería muy bien: Antes agregando open al elemento Isótopo, reemplazamos la imagen en miniatura src-atribuir con la URL a una versión más grande de la imagen del producto.Este último se almacena en el data-src-large-atributo de la imagen:

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

La implementación en la página del producto McDonalds también agrega una clase CSS item-open al contenedor principal dentro del cual están contenidos los elementos de isótopos:

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

Según esta clase, la opacidad de todos los elementos isotópicos que no no tener el open la clase asignada se reduce, nuevamente a través de CSS:

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

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

Puede ver los CodePens que se ajustan a los fragmentos de código anteriores aquí: http://codepen.io/fk/pen/dGAzl/ (usando Isótopo v1) y http://codepen.io/fk/pen/ohLvF/ (usando Isotope v2): ambos un poco toscos, pero funcionan en la última versión de Chrome.

Tenga en cuenta que utilicé spin.js para mostrar el indicador de carga, cambié ligeramente los nombres de las clases CSS y omití un montón de marcas, prefijos de proveedores y filtros específicos de IE en lugar de la página original del producto McDonalds para facilitar un poco las cosas. comprender (con suerte;)) - todo lo demás es casi una copia 1:1.

También tenga en cuenta que el complemento imagesLoaded que viene incluido con Isotope v1 tiene su problemas y probablemente será mejor que utilices el actual versión independiente del complemento si desea utilizarlo para determinar cuándo se carga la imagen del producto de alta resolución.

El JavaScript jsFiddle contiene algunos comentarios para ayudarle.
Espero que, combinado con la respuesta aquí, esto le brinde algunos consejos sobre cómo seguir adelante desde donde se encuentra actualmente.