Funktion zum Erweitern/Verkleinern von Isotopen

Question

Ich arbeite an einem Isotop – das ich dem McDonald-Beispiel so nahe kommen möchte, wie sich das Fenster ausdehnt und öffnet.

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

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

Ich habe eine Klasse, die die Höhe/Breite festlegt

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

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

Answer 1

Sie haben bereits die Grundlagen verstanden – das Festlegen der Breite und Höhe für das „erweiterte“/„offene“ Isotope-Element über eine CSS-Klasse open

<li class="product open">

und dann Isotope auslösen reLayout-Methode.

Das Zoomen des Produktbildes wird je nach Vorhandensein der genannten Klasse über CSS-Übergänge umgesetzt:

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

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

Aber die Miniaturbildabmessungen einfach zu vergrößern, würde nicht sehr schön aussehen: Vor hinzufügen open Zum Isotopenelement ersetzen wir somit die Miniaturbilder src-Attribut mit der URL zu einer größeren Version des Produktbildes.Letzteres wird im gespeichert data-src-large-Attribut des Bildes:

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

Die Implementierung auf der McDonalds-Produktseite fügt außerdem eine CSS-Klasse hinzu item-open zum übergeordneten Container, in dem die Isotope-Elemente enthalten sind:

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

Basierend auf dieser Klasse die Opazität aller Isotope-Elemente, die dies tun nicht habe den open Die zugewiesene Klasse wird reduziert, wiederum über CSS:

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

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

Hier können Sie CodePens sehen, die zu den Code-Schnipseln oben passen: http://codepen.io/fk/pen/dGAzl/ (mit Isotope v1) und http://codepen.io/fk/pen/ohLvF/ (mit Isotope v2) – beide sind an den Rändern etwas rau, funktionieren aber im neuesten Chrome.

Bitte beachten Sie, dass ich spin.js verwendet habe, um die Ladeanzeige anzuzeigen, die CSS-Klassennamen leicht geändert und im Gegensatz zur ursprünglichen McDonalds-Produktseite eine Reihe von Markups, Herstellerpräfixen und IE-spezifischen Filtern weggelassen habe, um die Sache etwas einfacher zu machen verstehen (hoffentlich ;)) - alles andere ist fast eine 1:1-Kopie.

Beachten Sie auch, dass das mitgelieferte imagesLoaded-Plugin im Lieferumfang von Isotope v1 enthalten hat seine Probleme und Sie werden wahrscheinlich besser dran sein, wenn Sie den Strom verwenden Standalone-Version des Plugins wenn Sie damit bestimmen möchten, wann das hochauflösende Produktbild geladen wird.

Das jsFiddle-JavaScript enthält einige Kommentare, die Ihnen bei der Arbeit helfen sollen.
Ich hoffe, dass Ihnen dies zusammen mit der Antwort hier ein paar Hinweise gibt, wie Sie von Ihrem derzeitigen Standort aus weitermachen können.