Funzionalità di espansione/contrazione degli isotopi

Question

Sto lavorando su un isotopo, che voglio avvicinare il più possibile all'esempio di McDonald mentre il riquadro si espande e si apre.

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

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

Ho una classe che imposta l'altezza/larghezza

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

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

Answer 1

Hai già capito bene le nozioni di base: impostare la larghezza e l'altezza per l'elemento Isotopo "espanso"/"aperto" tramite una classe CSS open

<li class="product open">

e quindi attivare gli isotopi reLayout-metodo.

Lo zoom dell'immagine del prodotto viene implementato tramite transizioni CSS a seconda della presenza di detta classe:

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

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

Ma semplicemente ingrandire le dimensioni dell'immagine in miniatura non sarebbe molto carino: Prima aggiungendo open all'elemento Isotope, sostituiamo quindi l'immagine in miniatura src-attribuire con l'URL a una versione più grande dell'immagine del prodotto.Quest'ultimo è memorizzato nel file data-src-large-attributo dell'immagine:

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

L'implementazione sulla pagina del prodotto McDonald's aggiunge anche una classe CSS item-open al contenitore principale all'interno del quale sono contenuti gli elementi isotopici:

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

Sulla base di questa classe, l'opacità di tutti gli elementi isotopici che lo fanno non avere il open la classe assegnata viene ridotta, sempre tramite CSS:

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

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

Puoi vedere i CodePen che si adattano agli snippet di codice qui sopra: http://codepen.io/fk/pen/dGAzl/ (utilizzando l'isotopo v1) e http://codepen.io/fk/pen/ohLvF/ (usando Isotope v2): entrambi un po' ruvidi, ma funzionanti con l'ultimo Chrome.

Tieni presente che ho utilizzato spin.js per visualizzare l'indicatore di caricamento, ho leggermente modificato i nomi delle classi CSS e ho tralasciato un sacco di markup, prefissi dei fornitori e filtri specifici di IE rispetto alla pagina del prodotto McDonald's originale per rendere le cose un po' più semplici afferrare (si spera ;)) - tutto il resto è quasi una copia 1:1.

Tieni inoltre presente che il plugin imagesLoaded fornito in dotazione in bundle con Isotope v1 ha il suo i problemi e probabilmente starai meglio usando la corrente versione autonoma del plugin se desideri utilizzarlo per determinare quando viene caricata l'immagine del prodotto ad alta risoluzione.

Il JavaScript jsFiddle contiene alcuni commenti per aiutarti.
Spero che, combinato con la risposta qui, questo ti dia alcuni suggerimenti su come andare avanti da dove ti trovi attualmente.