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

 

Для начала давайте просмотрим, как данная галерея выглядит в online-режиме или можете сохранить исходники галереи, скачав их с нашего сервера:

1) И так, приступим, для начала нам нужно создать HTML разметку, выглядит она следующим образом:

 Изображения вложены в контейнер img_container, который в свою очеред вкладывается в контейнер container.

2) Далее мы создаем СSS стили, которые не представляют особых сложностей. Внешний контейнер должен иметь свойство overflow: hidden;, чтобы отрезать все изображения которые выходят за его границы.

3) Завершающий этап будет подключение библиотеки jQuery, это будет осуществлять перемещение слайдов при наведении курсора мыши.  Для предотвращения дерганья при быстром перемещении курсора мыши над галереей используется таймер, который задерживает выполнение функции перестановки изображений на некоторый период времени при поступлении события:

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

На главную