Скрипт фотогалереи в модальном окне

ГлавнаяJava скрипты → Скрипт фотогалереи

Содержание:

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

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

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

Пример работы скрипта - фотогалерея

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


Как установить скрипт - фотогалерея

В скачаном архиве (ссылки внизу этой темы) лежит папка fancybox - её необходимо загрузить вам на свой хостинг в главную директорию. На странице, где вы хотите разместить фотогалерею пропишите следующий код между тегами:
<head> и </head>


<link rel='stylesheet' href='fancybox/jquery.fancybox.css' media='screen' />

<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>

<script type="text/javascript">
		$(document).ready(function() {
			$("a.gallery, a.iframe").fancybox();		
url = $("a.modalbox").attr('href').replace("for_spider","content2");
$("a.modalbox").attr("href", url);	
$("a.modalbox").fancybox(
{								  
"frameWidth" : 500,	 
"frameHeight" : 300 								  
});
});
</script>
<style>		
div#wrap {width:500px;margin-top:0px;}		
.green {color:#060; font-size:14px}
</style>

В данном коде вам нужно только изменить размеры под фотографии в модальном окне ширину и высоту: "frameWidth" : 500 и "frameHeight" : 300 соответственно.
А так же ширину блока маленьких фотографий: width: 500px; - все изменения вы делаете под свои размеры.

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


<center>
<div id="wrap">
<p>Красивые животные</p>
<a class="gallery" rel="group" title="Цапля" href="images/1_B.jpg"><img src="images/1_A.png" alt=""></a>
<a class="gallery" rel="group" title="Щенки" href="images/2_B.jpg"><img src="images/2_A.png" alt=""></a>
<a class="gallery" rel="group" title="Дельфин" href="images/3_B.jpg"><img src="images/3_A.png" alt=""></a>
<a class="gallery" rel="group" title="Дайвер" href="images/4_B.jpg"><img src="images/4_A.png" alt=""></a>
<a class="gallery" rel="group" title="Лягушка" href="images/5_B.jpg"><img src="images/5_A.png" alt=""></a>
<a class="gallery" rel="group" title="Волк" href="images/6_B.jpg"><img src="images/6_A.png" alt=""></a>
<a class="gallery" rel="group" title="Обезьянка" href="images/7_B.jpg"><img src="images/7_A.png" alt=""></a>
<a class="gallery" rel="group" title="Котёнок" href="images/8_B.jpg"><img src="images/8_A.png" alt=""></a>
</div></center>

Где 1_B.jpg - это большая фотография в модальном окне, а 1_A.png - маленькая в блоке со всеми картинками.

Чтобы установить второй, третий и т.д. блоки необходимо в последнем коде изменять rel="group" на rel="group2", rel="group3" и т.д. Если этого не сделать, то при просмотре в модальном окне фотографии будут показываться изо всех блоков все сразу.
И ещё, для того, чтобы изменить цвет фона при открытие модального окна, откройте файл: jquery.fancybox.css из папки fancybox и сделайте изменения в самом верху в этом коде: background-color: #3D3D3D;

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

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

Поделись ссылкой с друзьями:

Комментарии к статье

Елена 15-11-2013


спасибо, целый день искала

Санько 18-12-2013

Прошу пояснить.
Я понимаю, что в папку "images" следует загрузить свои картинки и залить её на свой хостинг в главную директорию, как и папку "fancybox". Возник вопрос: что делать если такая папка уже существует в главной категории?
Можно ли изменить имя папки на "images_1" и в коде прописать её имя? Либо загрузить картинки в уже существующую папку "images"???

Admin 18-12-2013

Можете сделать по-любому, как вам удобнее!
Только в первом случае с путями не путайте и всё!
А во-втором случае - чтобы одинаковых названий картинок не было.

Давид 16-01-2014

Все получилось! Большое спасибо автору
Только у меня один вопрос, у меня было 6 фотографии в одной строке, а теперь стало 2 строки по 3 фотографии, где в коде нужно удалить, чтоб опять было как прежде 1 строка?

Admin 16-01-2014

Это может быть по следующим причинам:
1) Ваши маленькие картинки не умещаются по размеру в блок div#wrap, или вы указали параметр - ширину для этого блока слишком маленький, либо этот же блок у вас просто не умещается по размерам в основной блок у вас на сайте.
2) Проверьте - не поставлен ли код для переноса строки < br /> в коде маленьких фотографий.
Ну, а основное - это проверяйте внимательно размеры фоток и блоков.

Давид 16-01-2014

Да, действительно картинки не помещались в div#wrap, и я изменил с 500 на 900.
Спасибо!

Санько 27-01-2014

Добрый день ув. Администратор.
В конце прошлого года писал комментарий, но руки дошли только сейчас. При создании фото галереи столкнулся с некой проблемой и не одной.
1) При прописывании размеров модального окна (любые вариации), Картинка в нём демонстрируется в исходном размере. Пришлось привести все картинки к нужному для просмотра размеру.
2) Проблема с затемнением. При любом числовом значении кода в "background-color:", в файле "jquery.fancybox.css" изменений не происходит. Исходный код: "background-color: #666", на мой взгляд, не достаточно плотный.
Из всего, что мне пришлось изменить получилось только определение ширины блока маленьких фотографий.
А вообще, скрипт фотогалереи классный, за что Вам огромное спасибо.
P.S.
Возможно эти проблемы возникли только у меня? возможно этому есть свои причины?

Admin 27-01-2014

Добрый день, Санько!
1) Разумеется картинки сначала нужно подогнать под нужный размер и после прописать эти размеры в коде, это же не трудно. А иначе здесь нельзя!
2) По поводу затемняющего фона: к сожалению этим занимался очень давно и скажу честно не помню точно, но изменить можно цвет фона. Всё в стилевых файлах, а подсказать точно вам - извините, просто сейчас нет времени.

Алексей 08-04-2014

А, простите, что делать если в некоторых версиях браузеров фотографии просто не открываются? как можно сделать "аварийное" открытие, что ли? чтобы фотография открывалась хоть в новой вкладке, но только если фотогалерея не заработала правильно..

Admin 08-04-2014

Если Вы хотите, чтобы у Вас правильно отображалось во всех браузерах, да и ещё во всех их версиях, то Вам в нужном порядке надо обращаться к программистам. Где в итоге у Вас система будет определять браузер пользователя и автоматом подстраиваться под него.
И ради интереса, напишите пожалуйста браузер и его версию, где этот скрипт "Фотогалерея" не работает.

Павел 28-11-2015

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