Содержание страницы
домикГлавная / Скрипты java и php / Фотогалерея в модальном окне
Фотогалерея в модальном окнеВашему вниманию предлагаю скрипт - фотогалереи в модальном окне. Данный скрипт ява работает на основе плагинов jquery и правильно отображается во всех основных браузерах. Размер фотографий в фотогалерее вы устанавливаете абсолютно любой, и даже если большие фотки будут разных размеров - это не беда, скрипт с этим справится и отобразит в модальном окне плавный переход между ними.

Скрипт Фотогалерея в модальном окне несомненно ещё больше украсит ваш сайт и придаст ему ещё больше выразительности.
В модальном окне есть навигация для смены картинок и красиво оформленные пояснения к ним. На одной странице можно размещать любое количество блоков с фотографиями, при этом сделав всего лишь одно изменение в коде.

Первый пример работы скрипта фотогалерея в модальном окне

Красивые животные

пример фотогалереи

Как установить фотогалерею в модальном окне на сайт

Загрузите из папки Фотогалерея модальное окно в скачанном архиве ( ссылка внизу этой темы ) всё содержимое к себе на хостинг. На странице, где вы хотите разместить фотогалерею, пропишите следующий код:

Код перед тегом </head>

htmlCOPY
<link rel="stylesheet" href="css/jquery.fancybox.css"> <script type="text/jаvascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/jаvascript" src="js/jquery.fancybox.pack.js"></script> <script type="text/jаvascript" src="js/jquery.fancybox-thumbs.js"></script> <script type="text/jаvascript"> $(document).ready(function() { $(".fancybox").fancybox({ openEffect:'none', closeEffect:'none' }); $(".fancybox-thumb").fancybox({ prevEffect:'none', nextEffect:'none', helpers:{title:{type:'outside'}, thumbs:{width:50,height:50}} }); }); </script>
Для показа фотогалереи на вашем сайте установите следующий код в нужное вам место:
htmlCOPY
<h1>Первый пример Фотогалерея в модальном окне<br /> <span>Красивые животные</span> </h1> <p> <a class="fancybox" title="Цапля" href="images/1_b.jpg" rel="gallery1"><img src="images/1_a.png" alt="Фото Цапля" /></a> <a class="fancybox" title="Щенки" href="images/2_b.jpg" rel="gallery1"><img src="images/2_a.png" alt="Фото Щенки" /></a> <a class="fancybox" title="Дельфин" href="images/3_b.jpg" rel="gallery1"><img src="images/3_a.png" alt="Фото Дельфин" /></a> </p>
Где 1_b.jpg - это большая фотография в модальном окне, а 1_a.png - маленькая в блоке со всеми картинками.

Чтобы установить несколько таких фотогалерей на одной странице, вы должны сделать одно изменение для каждого последующего блока с картинками, - это изменить rel="gallery1" на rel="gallery2", rel="gallery3" и т.д. Если этого не сделать, то при просмотре в модальном окне фотографии будут показываться изо всех блоков все сразу поочерёдно.

Второй пример фотогалереи с миниатюрами

Красивые животные 2

Во-втором примере показана фотогалерея с миниатюрами внизу страницы. Это для разнообразия и каждый будет устанавливать фотогалерею по своему желанию.

Для вывода на странице сайта фотогалереи с миниатюрами достаточно прописать код в необходимое для отображение место.
htmlCOPY
<h2>Второй пример Фотогалерея с миниатюрами<br /> <span>Красивые животные</span> </h2> <p> <a class="fancybox-thumb" title="Лягушка" href="images/5_b.jpg" rel="fancybox-thumb"><img src="images/5_a.png" alt="Фото Лягушка" /></a> <a class="fancybox-thumb" title="Волк" href="images/6_b.jpg" rel="fancybox-thumb"><img src="images/6_a.png" alt="Фото Волк" /></a> <a class="fancybox-thumb" title="Обезьянка" href="images/7_b.jpg" rel="fancybox-thumb"><img src="images/7_a.png" alt="Фото Обезьянка" /></a> </p>
Как вы заметили, принцип один и тот же, только различия значений для class и rel, потому как остальное всё уже прописано в скриптах и стилевых файлах.

На этом всё, какие будут вопросы - задавайте, и не забывайте ставить ЛАЙКИ.

стрелка вниз Скачать фотогалерею в мадальном окне

Ссылка на файл: скачать архив
Комментарии
Елена
16 июля 2018 17:16
Елена
спасибо вам большое, целый день искала фотогалерею именно в модальном окне...
Павел
3 августа 2018 19:31
Павел
Блин, спасибо тебе за скрипт фотогалереи!!!
Вообще огонь, всех тебе благ добрый человек! Я в скриптах не бум-бум и искал инфу по всему инету, но только тут все разжевано и понятно!
Ва-а-а-а-а-у-у-у-у спасибо!!!!!!!!!!!!!!!!!!!!!!!!!
Сергей
22 сетнября 2018 10:47
Сергей
Добрый день.
Спасибо за галерею. Все отлично работает.
Возник вопрос такого плана: Как сделать обрамление рисунков, как у Вас сделаны превьюшки в галереях? Хочу и себе такое...
Заранее благодарен за ответ.
Admin
22 сетнября 2018 15:17
Admin
Здравствуйте!
Обрамление для превьюшек были сделаны НЕ с помощью css, а в графическом редакторе, и по-моему это был Snagit 10 Editor
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!