Fonction d'expansion/contraction des isotopes

Question

Je travaille sur un isotope - que je veux rapprocher le plus possible de l'exemple de McDonald à mesure que le volet s'agrandit et s'ouvre.

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

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

J'ai une classe qui définit la hauteur/largeur

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

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

Answer 1

Vous avez déjà maîtrisé les bases : définir la largeur et la hauteur de l'élément Isotope "expansé"/"ouvert" via une classe CSS. open

<li class="product open">

puis déclencher les isotopes reMise en page-méthode.

Le zoom de l'image du produit est implémenté via des transitions CSS en fonction de la présence de ladite classe :

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

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

Mais agrandir les dimensions de l'image miniature ne serait pas très joli : Avant ajouter open à l'élément Isotope, nous remplaçons ainsi l'image miniature src-attribut avec l'URL vers une version plus grande de l'image du produit.Ce dernier est stocké dans le data-src-large-attribut de l'image :

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

L'implémentation sur la page produit McDonalds ajoute également une classe CSS item-open au conteneur parent dans lequel les éléments isotopiques sont contenus :

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

Sur la base de cette classe, l'opacité de tous les éléments isotopiques qui font pas avoir la open la classe attribuée est réduite, toujours via CSS :

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

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

Vous pouvez voir CodePens adapter les extraits de code ci-dessus ici : http://codepen.io/fk/pen/dGAzl/ (en utilisant Isotope v1) et http://codepen.io/fk/pen/ohLvF/ (en utilisant Isotope v2) - tous deux un peu approximatifs sur les bords, mais fonctionnant dans le dernier Chrome.

Veuillez noter que j'ai utilisé spin.js pour afficher l'indicateur de chargement, j'ai légèrement modifié les noms des classes CSS et j'ai laissé de côté un certain nombre de balises, de préfixes de fournisseurs et de filtres spécifiques à IE par opposition à la page produit originale de McDonalds pour rendre les choses un peu plus faciles à utiliser. saisissez (espérons-le ;)) - tout le reste est presque une copie 1:1.

Notez également que le plugin imagesLoaded fourni livré avec Isotope v1 a ses problèmes et vous feriez probablement mieux d'utiliser le courant version autonome du plugin si vous souhaitez l'utiliser pour déterminer quand l'image du produit haute résolution est chargée.

Le JavaScript jsFiddle contient quelques commentaires pour vous aider.
J'espère que, combiné à la réponse ici, cela vous donne quelques indications sur la façon de passer d'où vous êtes actuellement.