Бесплатное в сети!
» » Фотогалерея в модальном окне

Фотогалерея в модальном окне

Фотогалерея в модальном окне

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

Скрипт Фотогалерея в модальном окне несомненно ещё больше украсит ваш сайт и придаст ему ещё больше выразительности.

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

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

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


Фото Цапля Фото Щенки Фото Дельфин


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

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

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

<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>

Для показа фотогалереи на вашем сайте установите следующий код в нужное вам место:

Код для *.html

<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


Лягушка царевна Серый волк Красивая обезьяна


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

Для вывода на странице сайта фотогалереи с миниатюрами достаточно прописать код в необходимое для отображение место.

Код для *.html

<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, потому как остальное всё уже прописано в скриптах и стилевых файлах.

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

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

Ссылка на файл: fotogallereya.zip

Комментарии 4
Елена
16 июля 2018 17:16
Елена

спасибо вам большое, целый день искала фотогалерею именно в модальном окне...

Читать полностью
Павел
16 июля 2018 19:31
Павел

Блин, спасибо тебе за скрипт фотогалереи!!!
Вообще огонь, всех тебе благ добрый человек! Я в скриптах не бум-бум и искал инфу по всему инету, но только тут все разжевано и понятно!
Ва-а-а-а-а-у-у-у-у спасибо!!!!!!!!!!!!!!!!!!!!!!!!!

Читать полностью
Сергей
17 июля 2018 10:47
Сергей

Добрый день.
Спасибо за галерею. Все отлично работает.
Возник вопрос такого плана: Как сделать обрамление рисунков, как у Вас сделаны превьюшки в галереях? Хочу и себе такое...
Заранее благодарен за ответ.

Читать полностью
17 июля 2018 11:17
Admin

Сергей,
Здравствуйте!
Обрамление для превьюшек были сделаны НЕ с помощью css, а в графическом редакторе, и по-моему это был Snagit 10 Editor

Читать полностью
Добавить комментарий