Интернет магазин шабонов
Форма входа

Статьи сайта

Как развернуть миниатюру изображения с подробным описанием при помощи плагина Gridder



Google Images запускает уникальный пользовательский интерфейс с предварительным просмотром миниатюр. Кликнув по любому из этих миниатюр изображений, расширяется экран с более подробной информацией и большим рисунком.

Это одна из лучших функций галереи изображений, и теперь вы можете клонировать ее с помощью Gridder.js.


Этот бесплатный jQuery плагин невероятного UX от Google, создающий соответствующий эффект. Вы можете превратить любую фотогалерею в галерею в стиле Google Images со всеми функциями анимации и отображениями.

Я был приятно удивлен скоростью и простотой использования, которая поставляется с этим плагином. Просто щелкнув любой миниатюре, вы сразу увидите большой снимок и анимацию с описанием.


Изображения включают раздел с текстом описания, если вы хотите добавить некоторые детали или ссылки, связанные с фотографиями, то вы сможете это сделать с легкостью. Все только зависит от вашей фантазии. Особенно хорошо подходит для простых портфолио сайтов с целью сосредоточения на изображениях.

Кроме того, вы также сможете извлекать контент через Ajax. Это позволяет создавать динамические эскизы, которые вытягивают контент с других веб-сайтов или через API.

Каждое событие click предлагает метод обратного вызова, поэтому вы можете запускать другие плагины или функции JavaScript вместе с Gridder.

Поскольку Gridder работает на jQuery, для него требуется самая новая версия в качестве зависимости. Это все, что вам будет нужно (вместе с файлом Gridder.js), и с несколькими строками HTML кода.

Вы должны посмотреть страницу GitHub для полной инструкции по установке.
Вот быстрый просмотр того, как выглядит HTML:
Код
<!-- Gridder навигация -->
<ul class="gridder">
  <li class="gridder-list" data-griddercontent="#content1">
  <img src="http://placehold.it/600x400" />
  </li>
   
  <!-- Вы также можете загружать страницы html / ajax, заменив #ID URL-адресом -->
  <li class="gridder-list" data-griddercontent="/content.html">
  <img src="http://placehold.it/600x400" />
  </li>
</ul>
   
<!-- Gridder содержание -->
<div id="content1" class="gridder-content"> Здесь идет содержание... </div>


Весь контент загружается через JavaScript, поэтому вы можете загружать почти все, что захотите.

Это невероятно универсальный плагин с возможностью изменения скорости анимации, ослабления, закрытия стиля кнопки и положения смещения прокрутки, когда пользователь нажимает на новую миниатюру.

Тем не менее, если вы все еще не уверены, что этот плагин для вас, тогда советую посмотреть демонстрационную страницу в реальном времени Gridder.



Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.