Всем привет! Сегодня мы поговорим о возможно лучшей бесплатной фотогалереи, видео и фото слайдере, поговорим о "фотораме". Несмотря на то, что скрипт уже года 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:
Since usually the best galleries are created in jQuery, we’ve mainly focussed on jQuery type sliders, but there are a few simple CSS galleries as well.
This collection has been organized into five main categories so you can easy switch to your preferred section. Before we start, we wanted to tell you that it’s up to you to go for a free or premium solution.
We did find quite a few free quality image solutions, that you will enjoy. Of course, with premium resources – there were some galleries that simply blew us away.
Just go through the collection and find the best image solution for your needs. If it’s a personal project, surely you will not want to spend any money. But on other hand, if it’s a freelance job, maybe it’s worth spending a little money to really leave an impact on your client and save lots of time at the same time!
I guess what I am suggesting is to always look at how much time it takes for you to modify, install, or setup a free solution. If you aren’t as skilled or it’s time consuming – definitely look into pre-made code and inexpensive but high-quality tools like these.
jQuery Image SlideshowsBelow you will find all the best jQuery slideshows. Usually slideshows are used on top of the website to present the most important parts in the most fashionable way.
1. AviaSlider 5. Sequence JS (Free)
Sequence is a JavaScript slider based on CSS framework.
8. Slideshow 2 (Free)
Slideshow 2 image gallery
Slideshow 2 is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. Please visit their website for a full feature list.
9. JavaScript TinySlideshow (Free)
Very simple image slider solution.
This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.
You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider. I wanted to include it in this collection because it is so lightweight. Click here to download this slideshow and see a live preview.
jQuery Image GalleriesIn this section you will find Image Galleries. They are best suitable for portfolios, but can also be used in blogs. So let’s dig in.
10. Galleria
This section is dedicated to all the best and most beautiful sliders, booth premium and free. They do a similar job as the Slideshows, but can emphasize content holders.
20. Touch Enabled RoyalSlider
LayerSlider Responsive jQuery Slider Plugin.
22. UnoSlider
Master Slider – jQuery Touch Swipe Slider
24. Wow Slider
Accordion Slider – the best jQuery accordion slider on the market.
27. Fotorama image slider
It is a simple way to show your pictures or images, but powerful enough to blow you away. It’s free to use. Check it out .
28. All in One Slider
Blueberry jQuery image slider
Blueberry image slider is a jQuery plugin, that was developed specifically for responsive web design. Blueberry image slider is an open-source project, based on a 1140px grid system from cssgrid.net. It’s simple and at the same time an excellent free option.
I’m sure you will like it as much as I do. Check the live preview and download option .
30. RhinoSlider
Rhinoslider slider- The most flexible slider
34. MightySlider
Slideme jQuery slideshow
This jQuery plugin is great for the top of the website, to present your work or say more about you.
Slideme has got full documentation and a tutorial how to set up your slider, for every type of device individually. Design is fully responsive with CSS3 animations. It is easy to setup and provides a public API.
Slideme is free to use and definitely worth a look. Check out the demo here.
39. PgwSlider
Pgw slider is a jQuery slider,\ that is designed for showcasing your images. This slider is fully responsive. It is lightweight and all-browser compatible. Pgw slider is also SEO friendly.
This slider is very suitable for news or blogging websites as it can show your most recent post or articles.
40. All Around Content Slider
Lens Slider jQuery and WordPress plugin
Lens Slider is an open-source project and so, fully customisable. Slider uses very simple HTML markup of an unordered list. Images are shown as you can see in the screenshot. No other option is available. Lens Slider is also available as a WordPress plugin and free to use.
The most suitable usage would be for products, services, or ateam presentation.
Check it out here.
42. Gridder
Gridder jQuery and Ajax plugin
Gridder is an awesome slider for showcasing your work. Gridder kind of mimics Google image search. To view the larger picture you click on a thumbnail and it expands. This is a great way to show a large number of images at the same time.
Gridder is available as a jQuery or Ajax thumbnail previewer. It is an awesome free solution for your next portfolio project.
For jQuery live preview check here. If you want Ajax click here.
43. Barack Slideshow 0.3
Barack JS- JavaScript slideshow
Barack Slideshow is an elegant, lightweight slideshow written in JavaScript. This slideshow can operate with vertical, horizontal, and irregular lists. The images are preloaded with MooTool Assets. To keep your code clean, you should check the CSS code. This means changing some parts if needed.
Barack Slideshow can be used as a portfolio showcase, product list, or even for listing your clients.
Here you can find a demo and test different options.
44. jQZoom Evolution
JQ Zoom Evolution
JQZoom is a JavaScript image magnifier, built on top of the popular jQuery JavaScript framework. jQZoom is a great and really easy to use script to magnify parts of your image.
This image magnifier is the most suitable for online stores and restaurants menus.
Find the documentation and demo here.
45. Multimedia Portfolio 2
Multimedia Portfolio 2-jQuery slider
Multimedia Portfolio 2 is a jQuery plugin that can automatically detect the extension of each media file and apply the appropriate player. It supports images and videos. Multimedia Portfolio uses simple HTML markup and it’s easy to use.
This slider is best suitable for showcasing products, services, and even news.
46. jQuery Virtual Tour
jQuery virtual tour
jQuery Virtual tour is an extension of the simple panorama viewer. This jQuery virtual tour allows you to transform some panoramic views into a virtual tour! It’s a great plugin that is worth looking at.
47.jQuery Vertical News Slider
Vertical News slider – jQuery plugin
jQuery Vertical News slider is very useful for websites that want to show some news or marketing campaigns on their sites. It’s responsive and uses CSS3 animations. Vertical News slider also allows you to fully customise the style of the slider.
48. Multi Item Slider
We have come to our last section, where you will find the best pure CSS Based Galleries. They may not be as popular but are sure worth a try. See it for yourselves.
49. HoverBox Image Gallery
HoverBox Image Gallery
HoverBox Image Gallery is basically a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. For faster loading it only uses one image for thumbnail and roll-over preview. All major browsers are supported. HoverBox Image Gallery is free to use for your own projects.
It is best used as a photography showcasing for photographers, any type of portfolio and restaurant menus.
50. CSS Image slider with 3-D transitions
I have to say I really enjoyed researching these plugins. We found amazing sliders that will, hopefully, help you to work on your next project more efficiently. There’s something for every situation here.
There are so many amazing sliders and slideshows that it’s hard to decide what to pinpoint. But in my opinion you should definitely check out Gridder slider, because it’s really amazing what it can do, especially for free, so it’s a win-win situation.
And you definitely should not forget Slidea . Yes it’s a premium slider, but it carries so much value it’s well worth the investment!
If you enjoyed our article, comment, share it with your friends, and tell us if we missed your favorite slider.
Which is your favorite gallery plugin? We would love to hear your experiences!
В этом уроке я покажу Вам, как создать минималистичную, но в тоже время удобную и функциональную фото галерею на jQuery , или галерею изображений, кому как удобно. В галерее есть возможность создавать категории, с последующей фильтрацией. Так же есть возможность запуска слайд-шоу. Галерея работает во всех браузерах, так что проблем с адаптацией не будет.
Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto . Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания.
ИСХОДНИКИ
HTML разметкаСначала разберем панельку со списком категорий, это маркированный список ul . Причем у каждого элемента списка должно быть уникальное имя класса.
Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.
Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.
Стили CSSОсобо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto , которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.
Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.
Portfolio-categ { margin-bottom:30px; }
.portfolio-categ li {
display:inline;
margin-right:10px;
}
.image-block {
display:block;
position: relative;
}
.image-block img {
border: 1px solid #d5d5d5;
border-radius: 4px 4px 4px 4px;
background:#FFFFFF;
padding:10px;
}
.image-block img:hover {
border: 1px solid #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li {
float: left;
margin: 0 12px 20px 0;
overflow: hidden;
width: 245px;
padding:5px;
}
.home-portfolio-text { margin-top:10px; }
li.active a { text-decoration:underline; }
В принципе, со стилями должно быть все понятно. Чтобы категории выстроились в ряд свойству display придается значение inline . Для того чтобы придать эффект обводки изображения, задается фоновый цвет (белый) и отступ в 10 пикселей. Размеры элементов списка задаются в .portfolio-area li .
jQueryНу и напоследок самое важное, то ради чего весь урок. Это jQuery код. Начнем с фильтрации картинок, по категориям.
// Выбираем все дочерние элементы portfolio-area и записываем в переменную
var $data = $(".portfolio-area").clone();
$(".portfolio-categ li").click(function(e) {
$(".filter li").removeClass("active");
Var filterClass=$(this).attr("class").split(" ").slice(-1);
If (filterClass == "all") {
var $filteredData = $data.find(".portfolio-item2");
} else {
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, {
duration: 600,
adjustHeight: "auto"
}, function () {
LightboxPhoto();
});
$(this).addClass("active");
return false;
});
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 , которая и производит фильтрацию картинок. Это все что касается фильтрации.
Теперь, что касается увеличения изображения в всплывающем окне. Здесь все гораздо проще.
JQuery("a").prettyPhoto({
animationSpeed: "fast",
slideshow: 5000,
theme: "facebook",
show_title: false,
overlay_gallery: false
});
Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto . После чего в дело вступает библиотека prettyPhoto , и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши.
В данном уроке мы разберемся, как создать адаптивную галерею изображений с каруселью миниатюр. Галерея будет подстраиваться под размер окна просмотра, также можно будет отключить или включить карусель миниатюр. Навигация может осуществляться с клавиатуры.
Мы будем использовать плагин jQuery Touchwipe , так что навигация может осуществляться с помощью характерных манипуляций с экраном на iPhone и iPad.
Разметка HTMLВ коде HTML мы будем использовать основной контейнер с классом “rg-gallery ”. Также он будет иметь одинаковый с классом идентификатор. В другом элементе div с классом “rg-thumbs” будет размещаться структура для карусели Elastislide:
Предыдущий Следующий
Миниатюры будут иметь два атрибута data , которые будут использоваться позже в нашем коде JavaScript. Атрибут “data-large” содержит путь к большому изображению, а атрибут “data-description” содержит подпись, которая будет выводиться под текущим большим изображением.
Для структуры области просмотра больших изображений используется шаблон jQuery, который добавляется в заголовке нашего документа:
{{if itemsCount > 1}} Предыдущее изображение Следующее изображение {{/if}}
Мы добавляем условие, что навигация будет выводится только в случае наличия более одного изображения. Контейнер “rg-image ” будет использоваться для добавления большого изображения.
CSSКроме настройки нескольких параметров (например, поля и отступы для миниатюр в карусели Elastislide) нужно задать стили для остальных элементов галереи..
Элемент “rg-image-wrapper ”, который используется в шаблоне jQuery, будет иметь относительное позиционирование и полупрозрачное повторяющееся изображение в качестве фона. Рамка будет иметь скругленные углы и минимально допустимую высоту 20 px:
Rg-image-wrapper{ position:relative; padding:20px 30px; background:transparent url(../images/black.png) repeat top left; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; min-height:20px; }
Контейнер, который используется для добавления большого изображения будет иметь относительное позиционирование и высоту строки 0. Добавим для него выравнивание текста по центру мы заставим все строчные элементы выравниваться по центру. Но так как мы не используем для изображения “display:block ”, нужно установить высоту строки равной 0. Таким образом, не будет зазора над изображением, так как оно является строчным элементом по умолчанию:
Rg-image{ position:relative; text-align:center; line-height:0px; }
С помощью задания свойству большого изображения max-width значения 100%, мы добиваемся, чтобы оно всегда оставалось окруженным плавающим контейнером. Мы не нуждаемся в данном свойстве, но если вы хотите ограничить размер области предварительного просмотра, то вам придется устанавливать фиксированную высоту для класса “rg-image ” и изображение будет заполнять его при изменении ширины области просмотра.
Rg-image img{ max-height:100%; max-width:100%; }
Навигационные элементы будут иметь следующие стили:
Rg-image-nav a{ position:absolute; top:0px; left:0px; background:#000 url(../images/nav.png) no-repeat -20% 50%; width:28px; height:100%; text-indent:-9000px; cursor:pointer; opacity:0.3; outline:none; -moz-border-radius: 10px 0px 0px 10px; -webkit-border-radius: 10px 0px 0px 10px; border-radius: 10px 0px 0px 10px; }
Это стиль для левой стрелки, теперь посмотрим на свойства для правой стрелки:
Rg-image-nav a.rg-image-nav-next{ right:0px; left:auto; background-position:115% 50%; -moz-border-radius: 0px 10px 10px 0px; -webkit-border-radius: 0px 10px 10px 0px; border-radius: 0px 10px 10px 0px; }
Так как мы уже определили значение свойства left для элементов в целом, его придется установить в значение auto для правой стрелки.
При наведении курсора мыши стрелки будут становиться более четкими:
Rg-image-nav a:hover{ opacity:0.8; }
Подписи будут иметь следующие стили:
Rg-caption { text-align:center; margin-top:15px; position:relative; } .rg-caption p{ font-size:11px; letter-spacing:2px; font-family: "Trebuchet MS", "Myriad Pro", Arial, sans-serif; line-height:16px; padding:0 15px; text-transform:uppercase; }
Для переключателя установим следующие стили:
Rg-view{ height:30px; } .rg-view a{ display:block; float:right; width:16px; height:16px; margin-right:3px; background:#464646 url(../images/views.png) no-repeat top left; border:3px solid #464646; opacity:0.8; } .rg-view a:hover{ opacity:1.0; } .rg-view a.rg-view-full{ background-position:0px 0px; } .rg-view a.rg-view-selected{ background-color:#6f6f6f; border-color:#6f6f6f; } .rg-view a.rg-view-thumbs{ background-position:0px -16px; }
Индикатор загрузки будет появляться в центре изображения:
Rg-loading{ width:46px; height:46px; position:absolute; top:50%; left:50%; background:#000 url(../images/ajax-loader.gif) no-repeat center center; margin:-23px 0px 0px -23px; z-index:100; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; opacity:0.7; }
JavaScriptОсновная идея галереи заключается в ее гибкости. Частично задача решена с с помощью стилей: большое изображение подгоняется под контейнер. Для получения адаптивной карусели миниатюр мы используем плагин Elastislide.
Определим некоторые переменные:
// Контейнер галереи var $rgGallery = $("#rg-gallery"), // Контейнер карусели $esCarousel = $rgGallery.find("div.es-carousel-wrapper"), // Пункт карусели $items = $esCarousel.find("ul > li"), // Общее количество пунктов itemsCount = $items.length;
Затем функцию галереи:
Gallery = (function() { //Функция галереи })(); Gallery.init();
Здесь мы определяем переменные для текущего изображения, режима вывода и контроля за загрузкой изображения. Затем вызываем несколько функций, которые определяются ниже:
// Индекс текущего пункта
var current = 0,
// Режим: карусель || во весь экран
mode = "carousel",
// Проверка, если одно изображение загружено
anim = false,
init = function() {
// (Не обязательно) предварительная загрузка изображений здесьы...
$items.add("
").imagesLoaded(function() {
// Добавляем опции
_addViewModes();
// Добавляем обертку большого изображения
_addImageWrapper();
// Выводим первое изображение
_showImage($items.eq(current));
});
// Инициализуем карусель
_initCarousel();
},
Вызываем плагин Elastislide:
InitCarousel = function() { // Используем плагин elastislide: $esCarousel.show().elastislide({ imageW: 65, onClick: function($item) { if(anim) return false; anim = true; // По нажатию клавиши мыши выводим изображение _showImage($item); // Меняем текущее current = $item.index(); } }); // Устанавливаем текущее для elastislide $esCarousel.elastislide("setCurrent", current); },
Следующая функция выводит переключатели режимов просмотра и управляет ими:
AddViewModes = function() { // Кнопки вверху справа: скрыть / показать карусель var $viewfull = $(""), $viewthumbs = $(""); $rgGallery.prepend($("").append($viewfull).append($viewthumbs)); $viewfull.bind("click.rgGallery", function(event) { $esCarousel.elastislide("destroy").hide(); $viewfull.addClass("rg-view-selected"); $viewthumbs.removeClass("rg-view-selected"); mode = "fullview"; return false; }); $viewthumbs.bind("click.rgGallery", function(event) { _initCarousel(); $viewthumbs.addClass("rg-view-selected"); $viewfull.removeClass("rg-view-selected"); mode = "carousel"; return false; }); },
Функция _addImageWrapper добавляет структуру для большого изображения и кнопки навигации, если общее количество изображений больше, чем одно. Также инициализируются события навигации. Используя плагин jQuery Touchwipe, мы добавляем поддержку навигации с помощью сенсорного экрана и клавиатуры:
AddImageWrapper= function() { // Добавляем структуру для больших изображений и кнопок навигации (если общее количество пунктов > 1) $("#img-wrapper-tmpl").tmpl({itemsCount: itemsCount}).appendTo($rgGallery); if(itemsCount > 1) { // Добавляем навигацию var $navPrev = $rgGallery.find("a.rg-image-nav-prev"), $navNext = $rgGallery.find("a.rg-image-nav-next"), $imgWrapper = $rgGallery.find("div.rg-image"); $navPrev.bind("click.rgGallery", function(event) { _navigate("left"); return false; }); $navNext.bind("click.rgGallery", function(event) { _navigate("right"); return false; }); // Добавляем событие touchwipe для обертки большого изображения $imgWrapper.touchwipe({ wipeLeft: function() { _navigate("right"); }, wipeRight: function() { _navigate("left"); }, preventDefaultEvents: false }); $(document).bind("keyup.rgGallery", function(event) { if (event.keyCode == 39) _navigate("right"); else if (event.keyCode == 37) _navigate("left"); }); } },
Навигация по большим изображениям контролируется следующей функцией:
Navigate = function(dir) { // Навигация по большим изображениям if(anim) return false; anim = true; if(dir === "right") { if(current + 1 >= itemsCount) current = 0; else ++current; } else if(dir === "left") { if(current - 1 < 0) current = itemsCount - 1; else --current; } _showImage($items.eq(current)); },
В зависимости от направления движения мы устанавливаем текущий элемент.
Функция _showImage добавляет большое изображение и его название:
ShowImage = function($item) {
// Выводим большое изображение, которое ассоциировано с $item
var $loader = $rgGallery.find("div.rg-loading").show();
$items.removeClass("selected");
$item.addClass("selected");
var $thumb = $item.find("img"),
largesrc = $thumb.data("large"),
title = $thumb.data("description");
$("").load(function() {
$rgGallery.find("div.rg-image").empty().append("
");
if(title)
$rgGallery.find("div.rg-caption").show().children("p").empty().text(title);
$loader.hide();
if(mode === "carousel") {
$esCarousel.elastislide("reload");
$esCarousel.elastislide("setCurrent", current);
}
anim = false;
}).attr("src", largesrc);
};
return { init: init };
Если изображениям отводится на вашем веб-сайте важная роль, то галерея для их отображения послужит им отличной витриной. Однако, её наличие может обернуться вам и во вред - в случае просмотра вашей страницы с мобильного или сенсорного устройства. Пользователи мобильных устройств тоже заслуживают вашей заботы, что и навело меня на мысль написать эту статью.
Адаптивных галерей, проигрывателей слайдовых клипов и слайд-проекторов, которые помогают наводить порядок в ваших фото-архивах, сортировать скриншоты и прочие изображения на вашем сайте, великое множество. Некоторые отображают картинки через плавные переходы, снабжены опциями проявки/растушёвки изображений, наложения различных эффектов, а также открывают быстрый доступ к содержимому галерей через пиктограммы, имеют гибкие настройки и просто удобны для просмотра вашей страницы как в полноразмерном браузере, так и на экранах смартфонов, умещающихся в ладони.
Чтобы облегчить вам выбор наиболее подходящего вашему веб-сайту варианта, мы составили подборку 10 лучших известных нам галерей, проигрывателей слайдовых клипов и слайд-проекторов. Все они предлагаются бесплатно, то есть, служат отличным дополнением к прочим достоинствам вашего веб-сайта, повышая его пригодность к просмотру в оптимизированном окне браузера и на экране мобильного устройства.
"Карусель" для закольцованного воспроизведения картинок со слайд-эффектами и анимацией от Woothemes, сопровождающей проявку/растушёвку изображений, FlexSlider 2 отображает как фото, так и видео, причём, во всех основных браузерах.
10.
Умельцы из команды Webcodebuilder "скрестили" FlexSlider от Woothemes с Kwicks Джереми Мартина (Jeremy Martin) и получили "гибридный" адаптивный jQuery-модуль, наречённый ими FlexSlider feat. Kwiks. Модуль задействует "гармошку" Kwicks для картинок более высокого разрешения и FlexSlider - для более низкого.
