Необходимо создать фотогалерею для собственного сайта, которая работала бы без перезагрузки страницы? Вы имеете html-страницу или полноценный сайт под какой-либо CMS (системой управления содержимым) и хотите использовать приятную фотогалерею для показа фото Вашим знакомым, коллегам или клиентам?
Сегодня это не проблема. Shadowbox решит Вашу задачу.
Данная javascript-утилита способна на многое:
имеет возможность показывать как отдельные изображения с эффектом анимации появления и исчезновения, так и полноценные фотоальбомы;
подключет слайдшоу, при этом пользователю не придется листать фото вручную;
приятна в использовании, легка в настройке и изменении стилей;
переходит к следующему или предыдущему изображению, используя стрелки навигации на клавиатуре, закрывается при помощи кнопки Esc;
подключаема к любой web-странице и абсолютно не требует установки, сложной настройки и высокопроизводительных процессоров для обработки данных.
Основные параметры:
| animate:true | анимировать ли контейнер при загрузке изображения |
| slideshowDelay:5 | время до перехода к следующему изображению, если оно есть; если выставить 0 - то переход к следующему изображению будет только по нажатию мыши - слайдшоу не будет работать |
| initialHeight:160, initialWidth:320 | разрешение контейнера во время загрузки изображения |
| loading:"загружается..." | текст, который отображается во время загрузки изображения |
| overlayColor:"#f5f5f5" | цвет фона |
| overlayOpacity:0.9 | прозрачность фона |
| resizeDuration:0.15 | время анимации изменения размера при загрузке изображения |
* Все это доступно в файле shadowbox.js . Используйте любой текстовый редактор, чтобы открыть его и изменить необходимый параметр.
Как использовать Shadowbox?
Для того, чтобы использовать данную галерею, Вам необходимо скопировать файлы из папки Changed_package (если Вы выбираете мою версию) к себе на хостинг и добавить к Вашей web-странице, на которой необходимо разместить галерею (обычно - index.php или index.html), следующее:
путь к файлу shadowbox.js:
<script type="text/javascript" src="/js/shadowbox.js"></script>
путь к файлу shadowbox.css:
<link rel="stylesheet" href="/shadowbox.css" type="text/css" />
Вот этот код должен быть в верху страницы:
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
также необходимо загрузить изображения.
мои пути:
<script type="text/javascript" src="https://f.inverser.pro/files/sb/js/shadowbox.js"></script>
<link rel="stylesheet" href="https://f.inverser.pro/files/sb/css/shadowbox.css" type="text/css" />
Для того, чтобы использовать Shadowbox, Вам необходимо внутри html страницы использовать код:
<a href="https://f.inverser.pro/img/2/usemind.org_Stefan_Beutler_xg.jpg" title="Stefan Beutler" alt="Stefan Beutler" rel="shadowbox[Vacation]"><img src="https://f.inverser.pro/img/2/usemind.org_Stefan_Beutler_xg_t.jpg" style="float:left;" width="80" /></a>
<a href="https://f.inverser.pro/img/2/usemind.org_Stefan_Beutler_xg.jpg" - путь к файлу, который будет открываться при нажатии на миниатюру.
title="Stefan Beutler" alt="Stefan Beutler" - Заголовок изображения и описание. Используется для вывода вверху изображений.
rel="shadowbox[Vacation]" - код, вызывающий Shadowbox. Вместо слова [Vacation] может быть любое. Если необходимо использовать галерею, то это слово должно применяться только для тех изображений, которые включены в один альбом.
<img src="https://f.inverser.pro/img/2/usemind.org_Stefan_Beutler_xg_t.jpg" style="float:left;" width="80" /> - изображение-миниатюра, которое отображается на странице. Я использую миниатюры редко, так как их создание не автоматическое.
Какие изменения я произвел:
• При наличии нескольких изображений, пользователю неудобно искать кнопку «Следующее» или «Предыдущее», которые располагаются под самим изображением.
Поэтому, я вывел функцию «Следующее» - поверх изображения, то есть, при клике на изображение - пользователь переходит к следующему изображению.
• Когда пользователь перемещает курсор влево, то может увидеть большую кнопку-слой для переключения «Предыдущего» изображения.
• Если пользователь кликает на пустом пространстве фона заполнения, то изображение закрывается.
• Изменил стилевое оформление, добавил CSS-3 код для более красивого отображения.
Всего этого в стандарте нет.
При желании, Вы можете использовать неизмененные файлы.
Если Вам что-то не понятно, то Вы можете открыть исходный код страниц демонстрации: щелкните правой кнопкой мыши на пустом месте страницы > Исходный код.