В этом уроке я покажу Вам, как создать интерактивную галерею изображений для Вашего сайта, чтобы посетители, щелкая по миниатюрам изображений могли увидеть каждое изображение в увеличенном виде. И никакой перезагрузки страницы! Изображения появляются автоматически с эффектом постепенного проявления!
У нас на странице будет область с миниатюрами изображений галереи и область, где мы будем показывать изображение в увеличенном масштабе. Щелкая по любой из миниатюр, посетитель будет видеть соответствующее большое изображение в этой области. Изображение будет проявляться в течении некоторого времени, создавая эффект анимации, а предыдущее изображение будет в это время растворяться.
Справиться с такой задачей достаточно несложно, если применить возможности библиотеки 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, которые, несомненно, тоже нужно знать. После прохождения этого курса Вы не только усвоите основы, но и научитесь понимать этот язык программирования и создавать интерактивные элементы веб страниц.
А на этой ноте я буду с Вами прощаться.
Если урок Вам понравился или возникли какие-либо вопросы, пишите комментарии, и я Вам обязательно отвечу и вообще буду рада любым Вашим комментариям!
Также делитесь этим уроком с друзьями при помощи кнопок социальных сетей и подписывайтесь на обновления блога (если Вы еще не подписаны). Обещаю Вам много интересных и полезных уроков и статей.
Также поздравляю Вас с уже приближающимися Новогодними Праздниками и желаю провести их весело!
Библиотека jQuery появилась в 2007 году. С тех пор с ее использованием было разработано огромное количество плагинов, в том числе и галерей изображений. Они изобилуют красивыми рамками, годными анимационными переходами и замечательным дизайном. Однако, что интересно, мне еще не попадалась на глаза какая-нибудь jQuery-галерея с возможностью поворота изображения. А ведь довольно часто приходится просматривать изображения, перевернутые на 90 градусов, а то и вовсе загруженные вверх-ногами. Именно такая функциональность требовалась для моего проекта.
На самом деле, переворачивать изображения с использованием javascript очень легко. Зная это, я решил написать свою простую галерею изображений с возможностью поворота, которая базируется на плагине jquery. Сказано – сделано, спустя несколько часов появились вполне себе годные результаты:
Демонстрация работы
Как использовать
Для того, чтобы галерея работала корректно, необходимо две вещи: подгруженную библиотеку jQuery и подгруженные шрифты font-awesome. В head подключаем необходимые стили и скрипты:
Верстаем необходимую разметку галереи:
И инициализируем галерею:
$(function() { $(".simple_img_gallery").createSimpleImgGallery(); });
Готово. Вышло минималистично и вполне симпатично.
Реализованная галерея доступна на github .
Итог
В интернете появилось на одну галерею изображений больше:)
В качестве дальнейшего развития галереи можно реализовать возможность увеличения-уменьшения изображений – это также достаточно полезная функция в коммерческих проектах, которой обделены большинство галерей.
Также, для уменьшения количества зависимостей можно попробовать отказаться от font-awesome, поскольку из этого большого набора иконок используются только 4 из них.
Всем привет! Сегодня мы поговорим о возможно лучшей бесплатной фотогалереи, видео и фото слайдере, поговорим о "фотораме". Несмотря на то, что скрипт уже года 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 думаю она вам будет крайне интересна.
Бар миниатюр в нижней части экрана прокручивается автоматически когда пользователь перемещает мышь.
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows