Необходимо создать фотогалерею для собственного сайта, которая работала бы без перезагрузки страницы? Вы имеете html-страницу или полноценный сайт под какой-либо CMS (системой управления содержимым) и хотите использовать приятную фотогалерею для показа фото Вашим знакомым, коллегам или клиентам?

Сегодня это не проблема. Shadowbox решит Вашу задачу.

Данная javascript-утилита способна на многое:
имеет возможность показывать как отдельные изображения с эффектом анимации появления и исчезновения, так и полноценные фотоальбомы;
подключет слайдшоу, при этом пользователю не придется листать фото вручную;
приятна в использовании, легка в настройке и изменении стилей;
переходит к следующему или предыдущему изображению, используя стрелки навигации на клавиатуре, закрывается при помощи кнопки Esc;
подключаема к любой web-странице и абсолютно не требует установки, сложной настройки и высокопроизводительных процессоров для обработки данных.

Основные параметры:

Основные настройки shadowbox
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 код для более красивого отображения.
Всего этого в стандарте нет.
При желании, Вы можете использовать неизмененные файлы.

Если Вам что-то не понятно, то Вы можете открыть исходный код страниц демонстрации: щелкните правой кнопкой мыши на пустом месте страницы > Исходный код.


Файлы ShadowBox:

Скачать ShadowBox с изменениями
DEMO
Скачать ShadowBox оригинал
DEMO