28 jquery плагинов lightbox

Создание виджета Accordion

Теперь мы сделаем более практичную вещь — виджет Accordion (аккордеон). Вы наверняка с ним уже сталкивались, хотя, может быть, и не слышали этого названия. А оно говорящее — виджет действительно похож на аккордеон: у него есть панельки, которые при нажатии раскладываются и складываются.

Приступим к работе — начнём опять в окошке HTML. Создадим сам аккордеон, а в нём — класс panel, в котором, в свою очередь, будут два класса: panel-header и panel-body. На них мы напишем «HTML» и «helllo». Вам не обязательно писать то же самое, можете написать что угодно. Должно получиться вот так:

Сделаем несколько таких панелек. Для этого просто вставим то же самое (div class=”panel» и всё, что под ним) ещё пару раз. У вас должно получиться вот это:

Согласитесь, выглядит скудновато? Давайте добавим оформление. Для этого перейдём в окно CSS, определим там размеры нашего аккордеона (width: 450px) и отцентруем его (margin: auto). Теперь сделаем ему рамочку из чёрной линии в пиксель толщиной (border: 1px solid #222) и отступ текста в пять пикселей (padding: 5px). Конечно же, вы можете менять размеры и цвета.

Теперь скроем нижний текст (потом он будет показываться при клике):

Напоминаем, что мы всё ещё работаем в окошке CSS.

А теперь — вишенка на торте! Сделаем так, чтобы наш заголовок подчёркивался, когда мы наводим на него мышку, а курсор превращался в указатель. Поможет нам в этом селектор hover, который обозначает изменения при наведении курсора:

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

Разница в том, что вместо функции hide мы в этот раз используем toggle () — она позволяет переключать состояния. Например, если бы мы использовали show, текст бы просто показывался, а так он открывается при первом клике, а при втором опять прячется.

Казалось бы, вот и всё, задача выполнена, можно заканчивать? Но всё не так просто. При клике на заголовок открывается не только текст под ним, но и тексты на остальных panel-body, потому что мы не прояснили, какой именно надо показать.

Как это исправить? Для начала немного разберёмся в отношениях наших заголовков. Они похожи на семью, где есть родители, дети и братья. В HTML-коде это хорошо видно, давайте посмотрим:

Линии красного цвета ведут от родителя к ребёнку, а оранжевые соединяют братьев.

Кликаем мы на текст «HTML», родитель (parent) которого — panel-header, а открыть нам надо panel-body — брата panel-header. Чтобы найти родителя, достаточно написать .parent, потому что родитель всегда один, зато братьев может быть много, поэтому мы не просто пишем .siblings, но и конкретизируем, какой именно (panel-body).

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

XPANDA — адаптивный плагин для контента галереи

Если основной контент вашей галереи — изображения, вы не ошибетесь с плагином адаптивной галереи XPANDA. Он позволит вам выложить все ваши изображения в 4 различных основных форматах и сделать их центром внимания.

Несколько интересных особенностей плагина:

адаптивный дизайн
встроенный Lazyloader изображений для миниатюр и больших изображений
красивые анимации для раскрытия и свертывания изображений

В качестве дополнительного бонуса XPANDA предоставляет вам бесплатное Photoshop свойство для размытия и изменения размера изображений с очень низким размером файла.

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

Cube Portfolio — адаптивный jQuery Grid плагин

Первый плагин в нашем списке — Cube Portfolio. Он основан на jQuery и представляет ваш контент в виде сетки. Изображения могут быть расположены в виде кладки или в мозаичном формате. Вы также можете выводить их в слайдере, если хотите.

Вот некоторые из его особенностей:

адаптивный макет со встроенным лайтбоксом, поддерживающим изображения YouTube и Vimeo
полностью настраиваемый с более чем 30 различными опциями, чтобы сделать его уникальным для вашего сайта
19 стартовых шаблонов с мощным API
22 различных анимации для элементов сетки и 15 различных анимаций для подписей

Cube Portfolio — это невероятный плагин, который придаст вашему сайту профессиональный вид. Убедитесь, что вы попробовали различные настройки для титров и фильтров анимации в демоверсии.

Image Caption Hover Pro

Перейти

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

Достоинства плагина для анимации на сайте Image Caption Hover Pro:

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

ВП-плагин Image Caption Hover Pro для добавления анимаций при наведении на изображения стоит $16.

Пошаговая инструкция по подключению CSS-анимации появления

1.Скачиваем файлы к себе на компьютер
2.Загружаем на хостинг файлы animate.css и wow.min.js в соответствующие папки.

Если Ваш сайт работает на CMS то вам нужно загружать эти файлы в папку с активной темой или шаблоном.

Желательно чтобы все файлы CSS у вас находили в отдельной папке «CSS», а файлы скриптов в папке «js». Поэтому если таких папок у вас нет – создайте их и загрузите в них эти 2 файла, воспользовавшись FTP клиентом или менеджером файлов в панели управления хостингом.
3.Подключаем загруженные файлы в разделе заголовка страницы перед закрытием тега </head>.

Для сайта, работающего на WordPress этот фрагмент кода должен находиться в файле header.php активированной темы.
4.Для подключения файла animate.css используем код:

PHP

<link rel=»stylesheet» href=»/css/animate.css»>

1 <link rel=»stylesheet»href=»/css/animate.css»>

В атрибуте href должен быть указан полный путь к файлу animate.css.

Для WordPress существует специальная функция get_template_directory_uri(); которая позволяет определить путь к файлу с темой. В результате подключение CSS-файла будет выглядеть так:

PHP

<link rel=»stylesheet» href=»<?php echo get_template_directory_uri(); ?>/css/animate.css»>

1 <link rel=»stylesheet»href=»<?phpechoget_template_directory_uri();?>/css/animate.css»>
5.Для подключения файла wow.min.js воспользуемся кодом:

PHP

<script type=»text/javascript» src=»/js/wow.min.js»></script>

1 <script type=»text/javascript»src=»/js/wow.min.js»></script>

Здесь в атрибуте src так же должен быть указан путь к файлу wow.min.js на вашем сайте.

Для Wordpres сайта это будет выглядеть так:

PHP

<script type=»text/javascript» src=»<?php echo get_template_directory_uri(); ?>/js/wow.min.js»></script>

1 <script type=»text/javascript»src=»<?php echo get_template_directory_uri(); ?>/js/wow.min.js»></script>
6.Инициализируем скрипт. Для этого перед закрытием тега </body> добавляем следующий фрагмент кода:

PHP

<script>
jQuery(document).ready(function($) {
new WOW().init();
});
</script>

1
2
3
4
5

<script>

jQuery(document).ready(function($){

newWOW().init();

});

</script>
7.Сохраняем внесённые изменения.

Теперь, когда библиотека Animate.css и скрипт WOW.js подключены можно добавить анимацию появления на сайте.

Плагины для создание различных эффектов для изображений

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

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

Backstretch — простой плагин, который позволяет добавлять фоновое изображение изображение на любую страницу.

Ожидание готовности DOM-модели

Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.

Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:

Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

Использование альтернативной нотации

При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

Задержка срабатывания события ready

Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:

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

Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

CSShake

Я не видел более веселой и странной библиотеки CSS, чем CSShake. Это одной стороны она сумасшедшая, а с другой уникальная и поэтому, вероятно, не может быть использована на любом веб-сайте.

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

От мягких движений до энергичного встряхивания и всего, что между ними есть в этой библиотеке довольно легкой при установке и загрузке.

Почему JavaScript?

CSS анимации удобны, когда вы должны сделать переходы свойств в свои таблицы стилей. Плюс, они показывают фантастическую производительность из коробки — без добавления библиотеки на страницу. Однако, когда вы используете переходы CSS, чтобы привести в действие богатый проект движения (подобное вы увидите в последних версиях IOS и Android), они становятся слишком трудными в управлении, или их функции просто сыпятся ошибками.

В конечном счете, CSS анимации ограничивают вас определенной спецификацией. В JavaScript, по самой природе любого языка программирования, у вас есть бесконечное количество логического контроля. Механизмы JavaScript анимации усиливают этот факт, чтобы обеспечить новые функции, которые позволяют вам осуществлять некоторые очень полезные приемы:

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

Примечание: Если вас интересует тема производительности, то можете почитать Джулиана Шапиро “CSS vs. S Animation: что быстрее?” и Джека Дойла: “Разрушение мифа: CSS Animations vs. JavaScript”. Для демо производительности, обратитесь к панели производительности в документации Velocity и демо GSAP «Библиотека сравнения скорости».

Заключительные мысли

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

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

JQuery меню для вашего сайта

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

Замечательное выезжающее меню с левой стороны экрана с картинками.

Пример ι Скачать исходники

2. Меню с авто прокруткой.

Бесподобное JQuery меню. При наведении меню выезжает вверх, и автоматически прокручивается.

Пример ι Скачать исходники

3. «Fancy menu» с использованием JQuery и CSS.

Наверное самое простое и красивое меню. Есть выбор цветов. Это меню отлично впишется в дизайн любого сайта.

Пример ι Скачать исходники

Отличное меню с не большими значками, которые вращаются при наведении.

Пример ι Скачать исходники

Простое выпадающее меню с ослабляющим эффектом.

Пример ι Скачать исходники

6. Галерея и навигация с миниатюрами.

Прекрасная галерея с навигацией из миниатюр, которые в свою очередь, прокручиваются автоматически, когда пользователь вращает мышь вправо или влево.

Пример ι Скачать исходники

7. JQuery меню с картинками и подсказками.

При наведении на меню, картинка скользит вниз, а подсказка с ссылками поднимается снизу. Замечательная реализация.

Пример ι Скачать исходники

8. Меню «jStack» с использованием JQuery.

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

Пример ι Скачать исходники

Не плохое меню из блоков. При наведении блок увеличивается.

Пример ι Скачать исходники

При наведении на блок выпадает меню с ссылками.

Пример ι Скачать исходники

Классное меню. При наведении на блок меню плавно всплывает.

Пример ι Скачать исходники

Отличное анимированное горизонтальное меню с красивым эффектом.

Пример ι Скачать исходники

13. Меню с слайдами и с списком на JQuery и CSS3.

Замечательное меню для оформления в тёмных тонах. При наведении выскальзывает миниатюра с списком.

Пример ι Скачать исходники

14. Меню из кубиков с JQuery.

Замечательное меню из маленьких кубиков. Очень красивый эффект при нажатии на меню. Посмотрите пример!

Пример ι Скачать исходники

15. Красивое меню с картинками.

Пример ι Скачать исходники

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

Получение библиотеки jQuery UI

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

Выбор темы оформления

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

На сайте jQuery UI можно воспользоваться услугами специального приложения — настройщика тем (Themeroller), но кроме того существует целая галерея предопределенных тем, полностью готовых к использованию, из которых можно выбрать ту, которая вас больше всего устраивает, и тем самым облегчить себе жизнь.

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) — это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

Чтобы получить одну из готовых тем, следует перейти на вкладку Gallery. На момент написания этих строк галерея включала 24 темы, охватывающие широкий спектр вариантов цветового оформления — от приглушенных и нежных тонов до ярких и вызывающих. При выполнении щелчков на темах галереи внешний вид виджетов, отображаемых на остальной части страницы, будет соответствующим образом обновляться, позволяя вам оценить, как может выглядеть приложение:

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется — это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

Для выполнения примеров вам понадобятся все компоненты, поэтому проследите за тем, чтобы были установлены все флажки.

Между некоторыми компонентами, фигурирующими в списке, существуют зависимости, но в процессе создания своего варианта библиотеки можете об этом не думать. Если вы выбираете какой-либо компонент, то одновременно с ним загрузятся все компоненты, от которых он зависит.

Следующий шаг заключается в выборе темы. Это делается с помощью раскрывающегося списка, который располагается снизу на странице, как показано на рисунке:

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

После выделения всех компонентов и выбора темы и стабильной версии загрузите созданный вами пользовательский вариант загрузочного архива библиотеки jQuery UI, щелкнув на кнопке Download.

Mo.js

Из множества библиотек JavaScript для анимации я должен сказать, что Mo.JS одна из лучших. Эта библиотека имеет широкое распространение и на самом деле предназначены для анимации графики и пользовательского интерфейса.

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

Это идеальная библиотека анимации? Едва ли.

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

Elastic Circle Slideshow

The faster the better, or at least, the smoother the better! Smooth is the other name of modern CSS3 properties, also HTML5. Smooth is what makes websites stand out. It is what front-end developers continue to strive for. The Elastic Circle Slideshow could be the smoothest slideshow to date. It swipes through items rapidly without causing any attention loss or any other discomfort for the user. We see this particular slideshow as a great alternative for both desktop and mobile sites. To explore this great jQuery animation effect fully, you will need to download the full source code.

Download

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод на следующем примере (переберём элементы ):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора ). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента ). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) — DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово , которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута для всех элементов на странице:

$('a').each(function() {
  console.log($(this).attr('href'));
});

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в с (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery .

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});

Фотогалерея

Библиотека фотографий должна быть красивой, гибкой, интерактивной и нестандартной.Есть несколько плагинов, которые подходят для всего, что вам нужно.Веб-сайт с фотографиями, демонстрация продукта или личная фотография, ваше имя.

Supersized

Это потрясающий плагин.Мне это так нравится.Super large — это полноэкранное фоновое слайд-шоу, созданное для преобразования вашего веб-сайта в настоящее слайд-шоу с фотографиями с помощью библиотеки jQuery.Если вы фотограф, вам нужно быть супер большим!

квадрат

Square — это структура галереи изображений JavaScript поверх библиотеки jQuery.Его цель — упростить процесс создания профессиональных галерей изображений для Интернета и мобильных устройств.

PrettyPhoto

prettyPhoto — это клон jQuery в лайтбоксе.Он не только поддерживает изображения, он также поддерживает видео, flash, YouTube, iframe и Ajax.Это полноценный световой короб для выдувания.Если вы хотите немного настроить, это легко настроить, но очень гибко.Кроме того, скрипт совместим со всеми основными браузерами, даже с IE6.

SlideViewer

slideViewer — это легкий (3,5 КБ) подключаемый модуль jQuery, который позволяет мгновенно создать библиотеку изображений и написать несколько строк HTML, например неупорядоченный список изображений.

FancyBox

FancyBox — это инструмент, используемый для отображения изображений, HTML-содержимого и мультимедиа в стиле «лайтбокса» в стиле Mac.

ColorBox

ColorBox — это легкий настраиваемый плагин для лайтбоксов jQuery 1.3–1.6.Это точно так же, как FancyBox, так что из чего выбирать.