Як розгорнути мініатюри Як зображення Google
У службі Google Images використовується унікальний інтерфейс користувача ескізи з різних веб-сайтів. Натискання будь-якого з цих ескізів розширює екран з більш детальною інформацією та великою фотографією.
Це одна з найкращих функцій галереї зображень, яку я використовував і зараз, Ви можете клонувати його за допомогою Gridder.js.
Цей безкоштовний плагін jQuery слідує по стопах неймовірного UX від Google, створюючи плагін, що відповідає цьому ефекту. Ти можеш перетворити будь-яку галерею фотографій на галерею у стилі Google Images з усіма тими ж анімаціями та функціями відображення.
Я приємно здивований швидкістю та простотою використання, що поставляється з цим плагіном. Просто натисніть будь-яке ескіз негайно відображає більший постріл а анімації дуже чисті.
Зображення включають розділ для описового тексту у випадку, якщо ви хочете додати деякі деталі або посилання, пов'язані з фото. Це особливо добре працює для простих портфельних сайтів з метою фокусування на зображеннях.
Крім того, ви можете також тягніть вміст через Ajax. Це дозволить вам створювати динамічні ескізи які витягують вміст з інших веб-сайтів або через API.
Подія кожного кліку пропонує метод зворотного виклику, так що ви можете навіть запускати інші плагіни або функції JavaScript поряд з Gridder. Маючи багато варіантів, він практично відчуває себе як ціла сітка!
Починаючи з Сітки працює на jQuery, вона вимагає нової версії як залежність. Але це все, що вам потрібно (разом з файлом Gridder.js), і за допомогою декількох рядків HTML можна мати плавну мережу.
Ви повинні перевірити сторінку GitHub для повні інструкції з налаштування але ось a швидкий попередній перегляд як виглядає HTML:
Весь зміст витягується через JavaScript, так що ви можете завантажувати майже все, що хочете.
Це неймовірно універсальний плагін з опціями змінюйте швидкість анімації, послаблення, стиль закриття кнопок і положення зсуву коли користувач натискає нове ескіз.
Новий і про-розробники так само знайдуть велику цінність у цьому плагіні. Тим не менш, якщо ви все ще не впевнені, що це для вас, подивіться на демонстраційну сторінку Gridder і погуляйте.
