Как расширить миниатюры, такие как изображения Google
Google Images использует уникальный пользовательский интерфейс с предварительный просмотр миниатюр с разных сайтов. Нажатие на любую из этих миниатюр расширяет экран с большим количеством деталей и большим изображением.
Это одна из лучших функций галереи изображений, которую я использовал и сейчас, Вы можете клонировать его с Gridder.js.
Этот бесплатный плагин jQuery следует по стопам невероятного UX от Google, создавая плагин, соответствующий этому эффекту. Вы можете превратить любую фотогалерею в галерею в стиле Google Images со всеми одинаковыми анимациями и функциями отображения.
Я приятно удивлен скоростью и простотой использования этого плагина. Просто нажимая на любую миниатюру сразу показывает больший снимок и анимация супер чистая.
Изображения включить раздел для описательного текста в случае, если вы хотите добавить некоторые детали или ссылки, связанные с фотографиями. Это особенно хорошо работает для простых сайтов-портфолио с целью сосредоточиться на изображениях.
Кроме того, вы можете также тянуть контент через Ajax. Это позволяет вам создавать динамические миниатюры которые тянут контент с других сайтов или через API.
Каждое событие клика предлагает метод обратного вызова, так что вы можете даже запускать другие плагины или функции JavaScript вместе с Gridder. С таким большим количеством опций он практически ощущается как вся сетка!
С Гриддер работает на JQuery, это требует самой новой версии в качестве зависимости. Но это все, что вам нужно (вместе с файлом Gridder.js), и с несколькими строками HTML вы можете сделать свою сетку гладкой.
Вы должны проверить страницу GitHub для полная инструкция по настройке но вот быстрый предварительный просмотр о том, как выглядит HTML:
Весь контент вытащил через JavaScript, так что вы можете загрузить практически все, что захотите.
Это невероятно универсальный плагин с возможностью изменить скорость анимации, замедление, стиль кнопки закрытия и положение смещения прокрутки когда пользователь нажимает новый эскиз.
Как новички, так и профессиональные разработчики найдут большую ценность в этом плагине. Тем не менее, если вы все еще не уверены, что это для вас, посмотрите на демонстрационную страницу Gridder и поиграйтесь с ней..
