Всем привет! Сегодня мы поговорим о возможно лучшей бесплатной фотогалереи, видео и фото слайдере, поговорим о "фотораме". Несмотря на то, что скрипт уже года 2 не поддерживается и автор переключился на проект схожей тематики он прекрасно работает и продолжает радовать глаз.
Основные плюсы (+)
Минусы (-)
Это вариант подключения самый простой, но не самый лучший, его стоит использовать только при условии, что вам нужно выводить галерею на большинстве страниц сайта. Плюсом варианта является использование CDN.
Для облегчения поиска используйте Ctrl + F . Если заветной строки нет, то вам придётся подключить jQuery. На WordPress это можно сделать вставив код, расположенный ниже, в файл функций темы (functions.php). На самом деле этот скрипт используется при конфликтах разных версий jQuery и действует он по такой схеме: удаляет зарегистрированный ранее jQuery, регистрирует новый, выводит скрипт. Актуальные версии библиотеки jQuery можно найти тут .
Можно просто вставить такую строку между и :
В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.
Галерея выводится HTML кодом с помощью контейнера c class="fotorama"
, в контейнере размещаются код вывода изображения либо ссылка на изображение . При написании статьи на движке WordPress переключите редактор в текстовый режим и введите контейнер c class="fotorama" .
Выглядит это так:
Или так (нумерация ссылок необязательна):
1 3 4
Примеры настроек FotoramaРазмеры контейнераРазмеры блока фоторамы является размер первого изображения, другие картинки масштабируются пропорционально первой. Для исправления этой ситуации можно указать размеры вручную.
Существуют и другие настройки:
Data-width="98%" //относительная ширина data-ratio="800/600" //соотношение сторон data-minwidth="420" // мин. ширину data-maxwidth="900" // макс. ширину data-minheight="320" // мин. высота data-maxheight="100% // относительная макс. высота data-height="100% // относительная высота
МиниатюрыЗа миниатюры отвечает data-nav="thumbs"
Но такой способ не очень эффективен, так как скрипту приходится загружать сразу все фотографии для генерации миниатюр, поэтому будет рациональнее заранее подготовить маленькие копии картинок. WordPress автоматически делает миниатюры, мы их и будем использовать. Чтобы получить ссылку на миниатюру добавьте -70x70 к названию файла (https://сайт/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://сайт/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).
По умолчанию миниатюра - 64 × 64. Откорректировать этот параметр можно с помощью data-thumbwidth (ширина) и data-thumbheight (высота). Если вам нужно чтобы миниатюра имела свой собственный размер, то задайте параметры width и height для файла миниатюры:
Фоторама отлично обрабатывает HTML и CSS, что значительно расширяет функционал скрипта. Работайте со ссылками, блоками, таблицами, абзацами, пишите CSS и многое другое. Ниже представлены некоторые примеры работы галереи. Если визуальная часть не отображается, то нажмите кнопку "Result".
Показать / Скрыть примеры
See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.
See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.
Полноэкранный режим data-allowfullscreen="true" //в окне браузера data-allowfullscreen="native" //на весь мониторСуществует возможность добавить отдельное большое изображение для полноэкранного режима через data-full:
Галерей изображений
в виде слайдера . Когда я начинал подготавливать материал для этой подборки, думал, что качественного материала будет просто две бесконечности, так как тема галерей изображений
стара как мир и очень востребованная. Моему удивлению не было предела, когда с каждой вновь открытой демкой надежна найти что-то приличное таяла на глазах. В связи с этим подборка получилась не большая но, по моему, с довольно интересными экземплярами. Среди них есть как адаптивные галереи изображений
так и галереи
.
Кстати, в предыдущем топике я делал подборку плагинов галерей для WordPress так что если у вас есть сайт на WordPress думаю она вам будет крайне интересна.
Бар миниатюр в нижней части экрана прокручивается автоматически когда пользователь перемещает мышь.
Установка и настройка
Во многих случаях красивую фотогалерею на сайте можно сделать при помощи карусели с миниатюрами, которые открываются по клику в большом окне. Для создания такой галереи достаточно только средств HTML и CSS (см., например, статью Создание фотогалереи в Photoshop ), но значительно больше возможностей дает применение плагинов бесплатной библиотеки jQuery . Для примера, рассмотрим фотогалерею AD Gallery , разработанную шведским программистом Anders Ekdahl .
Эта фотогалерея позволяет выбрать несколько вариантов смены изображений, выводит шкалу с миниатюрами-превьюшками и текст под картинками, имеет режим слайд-шоу, а также множество других полезных функций. Плагин корректно работает в большинстве браузеров, включая IE 7, 8 и др. Один из вариантов фотогалереи AD Gallery показан ниже (пример, как всегда, рабочий):
Установка фотогалереи AD GalleryСначала создадим на сайте новую папку и назовём её ad-gallery . Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два js-скрипта, файл стилей CSS и несколько вспомогательных изображений.
Далее необходимо добавить в заголовок страницы с будущей фотогалереей внутрь тега ... следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации AD Gallery :
$(function() {
var galleries = $(".ad-gallery").adGallery();
});
Важное замечание:
если на вашем сайте используется несколько плагинов jQuery
, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
Не рекомендуется использовать на одной странице несколько разных версий jQuery
, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery
, так как не все версии взаимозаменяемы.
Для размещения изображений (больших - big.jpg и миниатюр - small.jpg) используется неупорядоченный список, вложенный в несколько тегов . Для нашего примера с пятью картинками HTML-код выглядит следующим образом:
Насчет значений "дивов" можете не особенно волноваться и просто скопировать весь контейнер, размещая ваши изображения в теги . Количество изображений, помещенных в них, может быть любым. Обратите внимание на способ вывода надписей под увеличенными картинками: атрибут title задает общее название, а alt - развернутое описание. Для реализации ссылки-картинки используется атрибут longdesc (третье изображение).
Как видим, установка фотогалереи AD Gallery , как, впрочем, большинства плагинов jQuery , очень простая и не требует особых знаний в программировании.
Настройка параметров фотогалереи AD GalleryБольшинство настроек внешнего вида фотогалереи AD Gallery выполняется с помощью правил CSS в файле jquery.ad-gallery.css . Основные из них снабжены русскими комментариями и не имеют каких-либо особенностей, то есть сложностей.
Анимацию и другие параметры можно изменять в файле jquery.ad-gallery.js
. Для этого откройте его в редакторе или в Блокноте и в самом начале увидите строчки с комментариями. Изменяя значения параметров и просматривая результат в браузере, можно настроить работу фотогалереи в соответствие с вашими задачами. Например, строчка
effect: "slide-hori", // эффекты слайд-шоу: "slide-vert", "fade", "resize", "none","slide-hori"
определяет один из пяти вариантов переходов при смене картинок.
Размеры окна фотогалереи определяются автоматически в соответствие с самым большим изображением. Поэтому желательно, чтобы картинки не очень отличались по высоте, иначе остается много пустого места.
Фотогалерею AD Gallery удобно использовать при небольшом количестве картинок. Если же ваша коллекция состоит из сотни-другой изображений, то ждать, когда все они прокрутятся, слишком утомительно, и не всякий пользователь "долетит до середины Днепра". К сожалению, в AD Gallery не предусмотрен ползунок для быстрого перемещения по миниатюрам. Поэтому для больших фотогалерей рекомендую использовать другой плагин jQuery - PP Gallery , о котором рассказано в следующей статье .
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в и в разделе "
В этом уроке я покажу Вам, как создать интерактивную галерею изображений для Вашего сайта, чтобы посетители, щелкая по миниатюрам изображений могли увидеть каждое изображение в увеличенном виде. И никакой перезагрузки страницы! Изображения появляются автоматически с эффектом постепенного проявления!
У нас на странице будет область с миниатюрами изображений галереи и область, где мы будем показывать изображение в увеличенном масштабе. Щелкая по любой из миниатюр, посетитель будет видеть соответствующее большое изображение в этой области. Изображение будет проявляться в течении некоторого времени, создавая эффект анимации, а предыдущее изображение будет в это время растворяться.
Справиться с такой задачей достаточно несложно, если применить возможности библиотеки jQuery. Этим мы с Вами и займемся.
Создаем галерею изображений с jQueryНо перед тем как писать код Java Script нам нужно пройти некоторые подготовительные этапы.
Во-первых, нужно подготовить изображения. У нас будет два вида изображений: миниатюры и изображения большого размера. Я создала папку «img», в которой создала еще 2 папки: «big» и «small». В папке «big» я сохранила большие изображения (у меня они все примерно одного размера по ширине и высоте, где-то 500px на 500px). В папке «small» лежат миниатюры тех же самых изображений (их размеры также должны быть примерно одинаковыми. Когда я говорю примерно, это значит, что разница в 2-3 пикселя не играет особого значения).
Вы можете использовать мои изображения скачав файлы из исходников или создать такую же структуру папок и поместить туда свои изображения, создавая уже собственную галерею.
Во-вторых, нам нужно создать html-файл, создать в нем разметку страницы с нашей галереей и подключить к этому файлу css-файл (таблицу стилей).
Давайте этим сейчас и займемся.
1. Откройте редактор для создания нашего кода и создайте новый html-файл. Назовем его «gallery.html» и сохраним в тот же каталог, где находится папка с картинками «img».
Теперь напишем содержимое этого файла.
Между тегами «body» будет находится div с идентификатором «wrapper». Он будет содержать 2 основных элемента: тег header, в котором будет находится заголовок и div с идентификатором «content», в котором будет находится вся наша галерея.
Div «content» будет содержать div с идентификатором «main», в котором будет находиться заголовок для галереи; div с идентификатором «gallery», где расположены миниатюры наших изображений и еще один div с идентификатором «photo». Div с идентификатором «photo» пока что будет пустым, но при работе галереи в него будут выводиться большие изображения соответствующих миниатюр.
Вот в общем-то и все. Код всего вышеописанного будет выглядеть следующим образом:
Gallery jQuery
Галерея на jQuery
Моя ГалереяВот так будет выглядеть страница если мы откроем ее в браузере:
2. Теперь странице нужно придать стилей. Для этого создадим файл таблицы стилей «style.css» и сохраним его в том же каталоге, что и html-документ.
Давайте подключим этот файл к нашей странице. Зайдите в наш html-файл, с которым мы только что работали и между тегов head подключите файл только что созданной таблицы стилей, прописав следующую строчку кода:
Таблица стилей подключена и теперь пришло время прописать стили для всех наших элементов. Зайдите в файл «style.css» и пропишите следующий код:
body{background:rgba(102,102,153,1);} #wrapper{margin:0 auto; width:80%;} header{text-align:center;} .logo{font-family:Helvetica, sans-serif; font-size:36px; color:#DD8D15; text-shadow:2px 2px 2px #333333;} h1{font-family:Tahoma, Geneva, sans-serif; font-style:italic; color:#FFF; text-shadow:2px 2px 2px #333; text-align:center;} #gallery{float:left; width:90px; margin-left:20px; border-right:1px solid #fff;} #gallery img{margin:0 0 10px 0; display:inline-block; border:1px solid #000;} #photo{position:relative; margin-left:150px; border-top:1px solid #fff;} #photo img{position:absolute; padding-left:150px;}
Здесь мы задаем цвет для нашей страницы, задаем ширину для div с идентификатором «wrapper» и устанавливаем ему положение в центре.
Также мы создаем стили для шрифтов, указывая различные параметры, такие как: цвет, размер, тень, стиль шрифта и его выравнивание.
Div с идентификатором «gallery» мы присваиваем обтекание по левому краю, ширину, отступы и правую рамку.
Картинкам-миниатюрам мы также задаем отступ рамку и свойство «display:inline-block», которое генерирует блочный элемент, обтекаемый другими элементами веб-страницы.
Div с идентификатором «photo» мы задаем отступ слева, верхнюю рамку, а также позиционируем относительно, а большие изображения, которые будут в него попадать позиционируем абсолютно.
Теперь если мы обновим страницу в браузере, то увидим вот что:
3. И последнее подготовительное действие – это подключение на нашу страницу библиотеки jQuery и создание js-файла для собственного скрипта.
Вы можете скачать файл библиотеки jQuery с сайта http://jquery.com/ или загрузить его из исходников к этому уроки из папку под названием «js».
Чтобы скачать файл для подключения библиотеки с сайта jquery.com нужно:
1.
Нажать на кнопку «Download» в меню сайта.
2.
На отрывшейся странице найти ссылку «Download the compressed, production jQuery 1.10.2» (последние цифры – это версия библиотеки, они могут отличаться).
3.
Нажать на ссылку правой кнопкой мыши и выбрать «Сохранить объект как…», после чего нужно выбрать то место, куда Вы хотите сохранить файл.
Кстати, Вам тоже нужно создать папку с именем «js» в основном каталоге и поместить туда файл библиотеки jQuery, который Вы скачаете либо с их сайта, либо из исходников.
После этого создайте новый JavaScript-файл, назовите его «my_script.js» и сохраните также в папку «js». В этом файле будет весь наш код для работы галереи.
Но перед тем как его писать нужно подключить эти два файла к нашей html-странице.
Для этого снова зайдите в файл «gallery.html» и перед закрывающим тегом head пропишите следующие строки:
Мы подключили наши файлы и теперь можно заняться самым интересным – написание кода для работы галереи.
4. Откройте файл «my_script.js» и напишите следующие строки:
Эта функция ждет пока загрузятся вся наша html-страница, прежде чем начать выполнение кода JavaScript. Между фигурными скобками будет располагаться весь наш последующий код. Кстати, комментарий «//здесь будет расположен весь наш код» писать не обязательно, он здесь для того, чтобы Вам просто было понятнее.
Сначала нам нужно выбрать все ссылки, находящиеся в div с идентификатором «gallery» и присвоить им событие щелчка мыши. Событию щелчка мы передадим анонимную функцию, которая и будет выполнять какие-либо действия. В данном случае функция будет с переменной «evt», которая будет сохранять объект события (то есть ссылку, по которой произведен щелчок).
$(document).ready(function() { $("#gallery a").click(function(evt){ }); });
Обычно браузер реагирует на нажатие по ссылке следующим образом: он отправляет нас на страницу, прописанную в параметре «href» ссылки. Но в данном случае нам это не нужно. Мы хотим, чтобы большие изображения появлялись на той же странице, на которой мы находимся сейчас в специально отведенном для них месте. Поэтому в первую очередь нужно отменить стандартное поведение браузера при щелчке на наши ссылки. Как раз для этого нам понадобиться переменная «evt», в которой сохранен объект события. Нам нужно применить к ней функцию объекта события «preventDefault».
$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); }); });
Теперь если Вы перезагрузите страницу в браузере и попробуете нажать на миниатюру, то браузер уже на отправит Вас на другую страницу с большой картинкой, как это было бы раньше. Вы просто останетесь на той же странице.
Во-первых, мы извлечем атрибут «href» большой картинки, по миниатюре которой произошел щелчок и поместим его в переменную «imgPath».
Во-вторых, мы создадим переменную «oldImg», в которой будет храниться та большая картинка, которая находится в области для изображений в данный момент.
В-третьих, мы создадим переменную «newImg», в которой сформируем тег img для новой картинки, которая должна появиться в области для изображений. Здесь нам пригодиться переменная «imgPath», которая содержит атрибут «href» для этой картинки.
$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $(""); }); });
Все нужные нам переменные мы создали. Осталось только проделать с ними некоторые действия.
Итак, нам нужно, чтобы новая картинка, по миниатюре которой посетитель только что кликнул сначала исчезла. Вы спросите – «Зачем?». Дело в том, что для того, чтобы сделать эффект проявления нам сначала нужно полностью скрыть изображение. Этого мы можем добиться при помощи функции hide() .
Следующим действием будет добавление новой картинки в тег с идентификатором «photo» и здесь нам подойдет функция prepend() , которая добавит html-код картинки в тег, а именно в самое его начало.
И теперь наша картинка должна красиво проявиться, например, за одну секунду. Здесь нам поможет функция fadeIn() .
$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $(""); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); }); });
Вы даже можете проверить Вашу страницу в браузере (предварительно перезагрузив). Если Вы щелкните на какой-либо картинке, то она появится. Но если после этого щелкнете по другой, то ничего больше не произойдет.
Все верно. Теперь, перед появлением новой картинки, мы должны удалять старую.
А делать мы это будем так: сначала мы скроем старую картинку в течении 1 секунды (так у нас получится плавный переход между изображениями). В этом нам поможет функция fadeOut() .
Но этого не достаточно, нужно не просто скрыть изображение, но и удалить его из тега «photo», а поэтому первым параметром для функции fadeOut() мы передадим время эффекта (1000 миллисекунд), а вторым параметром функцию, которая и будет удалять старую картинку при помощи функции remove() .
$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $(""); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ this.remove(); }); }); });
Теперь наша галерея уже работает. Вы можете перезагрузить страницу браузера и проверить ее работу.
Единственное, что осталось сделать – это дописать еще одну строчку кода, чтобы при загрузке страницы в области для больших изображений уже отображалась первая фотография.
Для этого мы воспользуемся селекторами и фильтром библиотеки jQuery для того, чтобы выбрать первое изображение, после чего «вешаем» на него событие click(), которому не передадим никаких аргументов. Это приведет к тому, что запустятся уже заранее определенные обработчики события и изображение проявится в нужной области.
Нам нужно дописать всего одну строчку почти в самом конце. Таким образом, весь наш JavaScript код будет выглядеть так:
$(document).ready(function() { $("#gallery a").click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $(""); newImg.hide(); $("#photo").prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ this.remove(); }); }); $("#gallery a:first").click(); });
Все! Галерея готова! Ее работу Вы можете посмотреть щелкнув по иконке с надписью «Демо» в самом начале поста.
Такую галерею Вы можете разместить на своем сайте или блоге, чтобы показывать Ваши фотографии или Ваши товары… или еще все, что угодно; все, что Вы сами придумаете.
JQuery действительно очень мощная вещь. Например, в данном конкретном случае мы написали совсем немного кода, а получили прекрасно работающую галерею. И это только малая часть того, что можно делать, зная возможности этой библиотеки и умея ими пользоваться.
Если эта тема Вам интересна, но Вы в ней новичок, то могу посоветовать Вам очень хороший курс от Евгения Попова «Javascript + jQuery для начинающих в видеоформате» .
В нем Вы сможете познакомиться не только с библиотекой jQuery, но и с основами Java Script, которые, несомненно, тоже нужно знать. После прохождения этого курса Вы не только усвоите основы, но и научитесь понимать этот язык программирования и создавать интерактивные элементы веб страниц.
А на этой ноте я буду с Вами прощаться.
Если урок Вам понравился или возникли какие-либо вопросы, пишите комментарии, и я Вам обязательно отвечу и вообще буду рада любым Вашим комментариям!
Также делитесь этим уроком с друзьями при помощи кнопок социальных сетей и подписывайтесь на обновления блога (если Вы еще не подписаны). Обещаю Вам много интересных и полезных уроков и статей.
Также поздравляю Вас с уже приближающимися Новогодними Праздниками и желаю провести их весело!
Здравствуйте, уважаемые читатели a! В этом уроке я покажу Вам, как создать минималистичную, но в тоже время удобную и функциональную фото галерею на jQuery , или галерею изображений, кому как удобно. В галерее есть возможность создавать категории, с последующей фильтрацией. Так же есть возможность запуска слайд-шоу. Галерея работает во всех браузерах, так что проблем с адаптацией не будет.
Для создания этой галереи будут использованы две бесплатные библиотеки : Quicksand и PrettyPhoto . Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания. Так же как и !
HTML разметкаСначала разберем панельку со списком категорий, это маркированный список ul . Причем у каждого элемента списка должно быть уникальное имя класса.
1 |
|
1 |  Название картинки опубликовано: 2012
|
Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.
Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.
Стили CSSОсобо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto , которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.
Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.
1 | Portfolio-categ
{
margin-bottom
:
30px
;
}
|
В принципе, со стилями должно быть все понятно. Чтобы категории выстроились в ряд свойству display придается значение inline . Для того чтобы придать эффект обводки изображения, задается фоновый цвет (белый) и отступ в 10 пикселей. Размеры элементов списка задаются в .portfolio-area li .
jQueryНу и напоследок самое важное, то ради чего весь урок. Это jQuery код. Начнем с фильтрации картинок, по категориям.
1 | // Выбираем все дочерние элементы portfolio-area и записываем в переменную
$(".portfolio-categ li"
)
.click
(function
(e)
{
var filterClass= $(this ) .attr ("class" ) .split (" " ) .slice (- 1 ) [ 0 ] ; if
(filterClass ==
"all"
)
{
LightboxPhoto()
;
|
C помощью метода clone() и селектора, выбираем все дочерние элементы у .portfolio-area и записываем их в переменную $data . Далее отслеживаем клик по одной из категорий, элемент li у списка с классом .portfolio-categ . Делаем все категории не активными, посредством удаления removeClass(«active»), если этого не делать то со временем все категории будут активными и фильтрация остановиться.
Так как мы кликаем по элементу списка, то в селекторе this содержится элемент списка то есть li , у него мы берем значение атрибута class и с помощью метода split разбиваем название класса на несколько частей, границей является пробел (т.е. если класс был «all active» то после разбиения мы получаем массив из «all» и «active»). А уже далее методом slice выбираем первый элемент массива (в нашем случае «all»), и записываем получившийся результат в переменную filterClass . Если пробела не было то название класса не измениться.
Далее проверяем если в переменной filterClass строка all , то методом .find выбираем все элементы с классом portfolio-item2 из массива $data , который мы рассматривали выше. Выбранные элементы (а это все элементы списка, то есть все картинки) помещаем в переменную filteredData .
В противном случае, если filterClass не равна all , то в переменную filterData поместим не все элементы списка, а лишь те у которых атрибут data-type совпадает с классом категории. Короче говоря элементы только одной категории.
И в конечном итоге полученную переменную передаем в библиотеку jquery quicksand , которая и производит фильтрацию картинок. Это все что касается фильтрации.
Теперь, что касается увеличения изображения в всплывающем окне. Здесь все гораздо проще.
1 | jQuery("a"
)
.prettyPhoto
({
|
Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto . После чего в дело вступает библиотека prettyPhoto , и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши. Полную документацию по prettyPhoto можно найти
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на
