Простейшая фотогалерея с превью на jQuery

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

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

Как это работает?

Итак. Для начала необходимо подготовить HTML-структуру галереи. Добавьте на страницу следующий код:

Здесь ничего сложного, у нас есть блок самой галереи #gallery, в которой мы размещаем увеличенное изображение .full и список миниатюр .thumbs

Также давайте добавим несколько CSS-стилей, чтобы хоть как-то понимать где и что находится.

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

Теперь перейдем к главному. Подключите библиотеку jQuery и следом добавьте небольшой скрипт:

Обратите внимание, что мы обрабатываем клик не по картинке миниатюры, а по ссылке, в которую обернута миниатюра. Это сделано на случай, если вы захотите выводить в виде миниатюр специально подготовленные уменьшенные изображения, а по клику на них будут открываться полноразмерные. Для этого вам понадобится в HTML-структуре прописать в ссылках пути к полноразмерным изображениям, а в скрипте передавать не SRC миниатюры, а HREF ссылки, в которую обернута миниатюра.

Собственно, что же делает скрипт? По клику на ссылку миниатюры, мы прерываем стандартную работу ссылки, а именно переход по ссылке, в переменную передаем значение ссылки на нажатое изображение, после чего начинаем анимировать главное (увеличенное) изображение, сперва прячем его (в скрипте используется метод затухания в течении 400 милисекунд), после того как изображение полностью исчезнет, подменяем ссылку старого изображения на новую и делаем обратную анимацию.

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,67 / 5 баллов
3 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.