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

Представленный плагин jQuery трансформирует набор изображений в маленькую галерею с несколькими опциями. Плагин Micro Image Gallery позволяет выбирать вид между одним изображением на все поле или набором миниатюр. Количество миниатюр на одной странице ограничивается девятью.

Изображения автоматически изменяют размер в соответствии с размером галереи. Для начала рассмотрим разметку HTML, как можно заметить, она не является сложной:

Все изображения нужно поместить в элемент div с классом microGallery. Теперь рассмотрим сам плагин, и как его вызвать.

Теперь рассмотрим некоторые параметры плагина, с помощью которых Вы сможете настроить плагин под свое усмотрение. Плагин принимает следующие параметры:

  • menu: определяет, будет ли видимо меню навигации (true), или оно будет выводиться только при наведении курсора мыши на галерею (false). Значение по умолчанию: true.
  • size: размер галереи. Доступные значения: “small”, “medium” или “large”.
  • mode: начальный режим работы галереи: “single” (выводится одно изображение) или “thumbs” (выводится набор миниатюр).

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.