Galleriffic - jQuery плагин, позволяющий создавать роскошные,быстро работающие фотогалереи изображений.
- Быстрая предзагрузка изображений после загрузки страницы
- Навигация по миниатюрам изображений (с нумерацией страниц)
- jQuery.history интеграция плагина для поддержки закладок-ссылок
- Слайд-шоу (с возможностью автоматического обновления закладки URL)
- Навигация с помощью клавиатуры
- События, которые позволяют добавить собственные эффекты переходов
- API для управления галереей с помощью пользовательских элементов управления
- Поддержка подписей для изображений
- Гибкая конфигурация
- Изящное отображение при отключенном JavaScript
- Поддержка нескольких галерей на одной странице
Самую свежую версию плагина вы всегда сможете скачать по ссылке ниже, с сайта автора
На момент написания этой статьи текущая версия плагина galleriffic-2.0. Итак, вы загрузили архив с плагином, теперь закачайте содержимое архива (а точнее, папки CSS и JS) к себе на сайт.
Между тегами
Code
<head>...</head>
Code
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<!-- jquery.history.js подключайте по желанию, если нужна поддержка истории просмотров фото -->
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
Для работы фотогалерей используется, в данном случае, версия JQuery 1.3.2, или более поздние версии (используя другие версии JQuery, вы действуете на свой страх и риск).
Скрипт jquery.history.js подключайте на своё усмотрение (если вам нужна поддержка истории просмотренных фото, при подключенном скрипте возможен возврат в обратном порядке к ранее просмотренным фото с помощью стрелки назад браузера).
Вариант первый - минимальная фотогалерея без создания миниатюр изображений, вместо навигации по миниатюрам, реализована навигация по списку заголовков изображений, есть нумерация страниц, перемещаться от изображения к изображению в фотогалерее можно различными способами:
- выбрав заголовок изображения в списке (при этом заголовок активного изображения выделится более жирным шрифтом)
- кнопками "Предыдущее" или "Следующее"
- просто кликнув по изображению
- запустив функцию слайд-шоу (изображения сменяются автоматически, при этом в списке заголовков соответствующие заголовки активных изображений фотогалереи выделяются жирным шрифтом)
В дополнение к скриптам, указанным выше, между тегами
Code
<head>...</head>
Code
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-1.css" type="text/css" />
В нужном вам месте страницы сайта вставьте код фотогалереи:
Code
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a class="thumb" href="/img/1.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/2.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/3.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/4.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/5.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/6.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/7.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/8.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/9.jpg" title="Описание фото">Заголовок фото</a></li>
<li><a class="thumb" href="/img/10.jpg" title="Описание фото">Заголовок фото</a></li>
</ul>
</div>
Всё просто, если необходимо добавить больше изображений в фотогалерею, просто добавьте их строками вида
Code
<li><a class="thumb" href="Здесь путь к файлу изображения" title="Описание фото">Заголовок фото</a></li>
Возникает вопрос: как реализовать переключатели, если изображений будет много, и каким образом указать, по сколько изображений выводить в списке на каждой странице фотогалереи?
Очень просто, это делается в установках скрипта jquery.galleriffic.js, откроем его для редактирования и найдём строку
Code
numThumbs: 20
Вот в этой строке и устанавливается, сколько максимально изображений в списке будет выводиться на каждой странице фотогалереи. В данном случае 20 изображений, изображения же 21, 22 и прочие уйдут на вторую страницу.
У меня на демо-странице настроен вывод по 5 изображений в списке (чтобы не загружать много изображений, я ограничился десятью), соответственно получилось две страницы фотогалереи.
Здесь же, в этом скрипте, можно отредактировать текст навигационных ссылок
Code
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
А также указать, выводить или не выводить переключатели страниц сверху и снизу списка изображений
Code
enableTopPager: false,
enableBottomPager: true,
В данном случае вывод переключателей страниц вверху отключен, а внизу включен. В этой строке можно задать количество страниц, выводимое в переключателе
Code
maxPagesToShow: 7
Скрыть ссылки навигации и слайд-шоу можно в этих строках скрипта
Code
renderSSControls: true,
renderNavControls: true,
enableHistory: false - в этой строке можно включить/отключить историю для просматриваемых фото (нужен также подключенный скрипт jquery.history.js)
enableKeyboardNavigation: true - включить/отключить возможность навигации при помощи клавиатуры
Изменив значение false на true в этой строке
Code
autoStart: false
вы тем самым сделаете автозапуск слайд-шоу изображений при открытии страницы с фотогалереей.
Теперь, после того, как вы разместили в нужно месте страницы контейнер с фотогалереей, а также настроили все необходимые вам параметры скрипта, остается добавить лишь в конец кода страницы еще один скрипт
Code
<script type="text/javascript">
// Эти стили будут применяться только при включенном JavaScript
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
$(document).ready(function() {
// Инициализация минимальной фотогалереи
$('#thumbs').galleriffic({
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls'
});
});
</script>
Вариант второй - более интересный вариант в плане эффектности, в данном варианте уже имеются превью изображений, а также реализован эффект перехода (как бы перекатывания) между мини-картинками изображений при их пролистывании навигационными кнопками.
Добавлена реализация описания изображения под ним и вывод ссылки на просмотр (скачивание) изображения в его полном размере.
Для установки этого варианта фотогалереи нам понадобится подключить между тегами
Code
<head>...</head>
слеующие файлы стилей и скрипты
Code
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
Код самой фотогалереи следующий:
Code
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a class="thumb" name="leaf" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
<div class="download">
<a href="Здесь путь к файлу изображения в его оригинальном размере">Оригинальный размер</a></div>
<div class="image-title">Заголовок изображения, выводимый в фотогалерее под фото</div>
<div class="image-desc">Описание фотографии, выводимое под заголовком изображения в фотогалерее</div>
</div>
</li>
<li><a class="thumb" name="drop" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
Это второй вариант, в котором нет вывода заголовка и ссылки на полноразмерное изображение. Здесь можно разместить любой HTML-код.
</div>
</li>
</ul>
</div>
Как вы видите, код галереи по-прежнему представляет из себя обычный ненумерованный список, в котором я показал всего лишь два пункта, просто для экономии места я не стал вставлять код фотогалереи с демо-страницы, где пунктов (изображений) десять.
Важно понять, что вариантов отображения фото в фотогалерее в данном случае несколько, в первом варианте
Code
<li><a class="thumb" name="leaf" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
<div class="download">
<a href="Здесь путь к файлу изображения в его оригинальном размере">Оригинальный размер</a></div>
<div class="image-title">Заголовок изображения, выводимый в фотогалерее под фото</div>
<div class="image-desc">Описание фотографии, выводимое под заголовком изображения в фотогалерее</div>
</div>
</li>
для изображения будет выводиться заголовок, описание и ссылка на полноразмерный просмотр. Во втором случае
Code
<li><a class="thumb" name="drop" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
Это второй вариант, в котором нет вывода заголовка и ссылки на полноразмерное изображение. Здесь можно разместить любой HTML-код.
</div>
</li>
под изображением будет выводиться то, что вы включите в блок с классом caption (это может быть какой-то текст, либо любой html-код)
В конце кода страницы добавляем скрипт:
Code
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Слайд-шоу',
pauseLinkText: 'Пауза Slideshow',
prevLinkText: '‹ Предыдущее фото',
nextLinkText: 'Следующее фото ›',
nextPageLinkText: 'Вперед ›',
prevPageLinkText: '‹ Назад',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
в котором также можно отредактировать текст ссылок и некоторые параметры по аналогии с предыдущим примером.
Вариант третий - мы продолжаем рассматривать варианты фотогалерей, и следующий вариант будет отличаться от предыдущего лишь наличием истории просматриваемых фотографий.
Подключение скрипта jquery.history.js даст возможность возврата к просмотренным фото в обратном порядке с помощью стрелки "Назад" браузера.
Это подключаем между тегами
Code
<head>...</head>
Code
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" href="css/galleriffic-3.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
Код фотогалереи будет тот же
Code
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li><a class="thumb" name="leaf" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
<div class="download">
<a href="Здесь путь к файлу изображения в его оригинальном размере">Оригинальный размер</a></div>
<div class="image-title">Заголовок изображения, выводимый в фотогалерее под фото</div>
<div class="image-desc">Описание фотографии, выводимое под заголовком изображения в фотогалерее</div>
</div>
</li>
<li><a class="thumb" name="drop" href="Здесь путь к файлу большого изображения в фотогалерее" title="Описание фото">
<img src="Здесь путь к файлу мини-картинки в 75х75 пикселов" alt="Описание фото" /></a>
<div class="caption">
Это второй вариант, в котором нет вывода заголовка и ссылки на полноразмерное изображение. Здесь можно разместить любой HTML-код.
</div>
</li>
</ul>
</div>
В конце кода страницы будет следующий скрипт
Code
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
В настройках скрипта, само собой, в строке
Code
enableHistory: true
значение параметра должно быть true.
Продолжение во второй части статьи...
Перевод и описание: PS-Studio.Info
Всего комментариев: 5
Большое спасибо! CSS я сразу поменял под свою страницу: на 1024px, так что место есть. Просто долго не мог въехать где параметры левого контейнера найти. Теперь разберусь.
Классный у тебя сайт. Спасибо за полезную информацию!
в коде самой страницы ищи ссылки с классом thumb, в них прописаны адреса на большие превью-изображения,которые в галерее появляются справа, типа таких
<a class="thumb" name="leaf" href="http://ps-studio.info/WEBPRACTIC/60/img/1.jpg" title="Автоапельсин">
<img src="http://ps-studio.info/WEBPRACTIC/60/img/1.1.jpg" alt="Автоапельсин" /></a>
в этой ссылке http://ps-studio.info/WEBPRACTIC/60/img/1.jpg адрес картинки, ее ширину нужно уменьшать, сейчас она 500px, сделай к примеру 400px
но тогда в css файле соответственно нужно менять параметры ширины контейнера,в котором большие превью справа появляются
В скрипте, что в конце кода страницы, нужно поменять значение ширины в этой строке
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
Добрый человек, спасибо тебе огромное за шикарную галерею: монтирую её сейчас в свой сайт. Пара вопросов: как сделать 4 колонки в превьюшках вместо трёх? Разметка в CSS или скриптами задана?
Заранее спасибо!