Создаем галерею миниатюр с помощью jQuery
На сайтах часто можно встретить множество изображений, зачастую они несут визуальную дополнительную информацию для посетителя. Но не всегда картинки организовано правильно, и занимают множество пространства на блоге, а это не очень хорошо если ваш сайт несет также множество текстовой информации. В данном уроке мы рассмотрим как красиво организовать миниатюры на сайте, при этом существенно упростив навигацию по ним. Это мы осуществим с помощью маленького плагина jQuery.
Представленный плагин jQuery трансформирует набор изображений в маленькую галерею с несколькими опциями. Плагин Micro Image Gallery позволяет выбирать вид между одним изображением на все поле или набором миниатюр. Количество миниатюр на одной странице ограничивается девятью.
Изображения автоматически изменяют размер в соответствии с размером галереи. Для начала рассмотрим разметку HTML, как можно заметить, она не является сложной:
1 2 3 4 5 6 7 |
</pre> <div id="mG1"><img src="gallery/2.jpg" alt="" /> <img src="gallery/3.jpg" alt="" /> <img src="gallery/4.jpg" alt="" /> <img src="gallery/5.jpg" alt="" /></div> <pre> |
Все изображения нужно поместить в элемент div
с классом microGallery. Теперь рассмотрим сам плагин, и как его вызвать.
1 2 3 4 5 |
$("#mG1").microgallery({ menu:true, size:'small', mode:'single' }); |
Теперь рассмотрим некоторые параметры плагина, с помощью которых Вы сможете настроить плагин под свое усмотрение. Плагин принимает следующие параметры:
- menu: определяет, будет ли видимо меню навигации (true), или оно будет выводиться только при наведении курсора мыши на галерею (false). Значение по умолчанию: true.
- size: размер галереи. Доступные значения: “small”, “medium” или “large”.
- mode: начальный режим работы галереи: “single” (выводится одно изображение) или “thumbs” (выводится набор миниатюр).
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 27.04.2012 в 14:02, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |