Функция расширения/сжатия изотопа

StackOverflow https://stackoverflow.com//questions/22042409

  •  21-12-2019
  •  | 
  •  

Вопрос

Я работаю над изотопом, который хочу максимально приблизить к примеру Макдональда, когда панель расширяется и открывается.

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

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

У меня есть класс, который устанавливает высоту/ширину

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

                $("#filter").click();
            });
Это было полезно?

Решение

Вы уже освоили основы — настройку ширины и высоты для «расширенного»/«открытого» элемента Isotope с помощью класса CSS. open

<li class="product open">

а затем активировать изотоп перепланировка-метод.

Масштабирование изображения товара реализуется с помощью CSS-переходов в зависимости от наличия указанного класса:

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

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

Но простое увеличение размеров миниатюрных изображений выглядело бы не очень красиво: До добавление open на элемент Isotope, мы таким образом заменяем миниатюру изображения src-атрибут с URL-адресом увеличенной версии изображения продукта.Последний хранится в data-src-large-атрибут изображения:

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

Реализация на странице продукта McDonalds также добавляет CSS-класс. item-open в родительский контейнер, в котором содержатся элементы Isotope:

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

На основе этого класса определяется непрозрачность всех изотопных предметов, которые нет иметь open назначенный класс уменьшается, опять же через CSS:

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

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

Вы можете увидеть, как CodePens соответствует приведенным выше фрагментам кода здесь: http://codepen.io/fk/pen/dGAzl/ (с использованием Isotope v1) и http://codepen.io/fk/pen/ohLvF/ (с использованием Isotope v2) — оба немного грубоваты, но работают в последней версии Chrome.

Обратите внимание, что я использовал spin.js для отображения индикатора загрузки, немного изменил имена классов CSS и исключил кучу разметки, префиксов поставщиков и фильтров, специфичных для IE, в отличие от исходной страницы продукта McDonalds, чтобы упростить задачу. поймете (надеюсь ;)) - все остальное почти копия 1:1.

Также обратите внимание, что плагин imagesLoaded, который поставляется в комплекте с Isotope v1 имеет свой проблемы и вам, вероятно, будет лучше использовать текущий автономная версия плагина если вы хотите использовать его для определения момента загрузки изображения продукта в высоком разрешении.

JavaScript jsFiddle содержит несколько комментариев, которые помогут вам.
Я надеюсь, что в сочетании с ответом здесь это даст вам несколько советов о том, как двигаться дальше с того места, где вы находитесь сейчас.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top