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

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

4 1 915

фото SEO продвижение

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

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

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

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

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

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

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

Код между тегами <head> и </head>
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(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" и т.д. Если этого не сделать, то при просмотре в модальном окне фотографии будут показываться изо всех блоков все сразу поочерёдно.

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

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

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

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

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

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

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

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

Похожие новости

Елена
  • 0
User: Еленаспасибо вам большое, целый день искала фотогалерею именно в модальном окне...
  • 15 ноября 2013 17:54
Санько
  • 0
User: СанькоПрошу пояснить.
Я понимаю, что в папку images следует загрузить свои картинки и залить её на свой хостинг в главную директорию, как и всё остальное.
Возник вопрос: что делать если такая папка уже существует в главной категории?
Можно ли изменить имя папки на images_1 и в коде прописать её имя? Либо загрузить картинки в уже существующую папку images???
  • 18 декабря 2013 14:59
Админ
  • 0
User: модератор→ Санько
Можете сделать по-любому, как вам удобнее!
Только в первом случае с путями не путайте и всё!
А во-втором случае - чтобы одинаковых названий картинок не было.
  • 18 декабря 2013 16:41
Павел
  • 1
User: ПашаБлин, спасибо тебе за скрипт фотогалереи!!!
Вообще огонь, всех тебе благ добрый человек! Я в скриптах не бум-бум и искал инфу по всему инету, но только тут все разжевано и понятно!
Ва-а-а-а-а-у-у-у-у спасибо!!!!!!!!!!!!!!!!!!!!!!!!!
  • 28 ноября 2015 16:28