Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Галерея фотографий Automatic Image Montage with jQuery с LightBox

В статье рассказываете об одной галереи фотографий для сайтов, которой лично пользуюсь, к которой прикрепляем LightBox.

19.02.2015 Leave a Comment 7 006 просмотров

В статье рассказываете об одной галереи фотографий для сайтов, которой лично пользуюсь, к которой прикрепляем LightBox.

Демо Исходники

Тут можно посмотреть более проработанный вариант данной галереи: http://photo.harrix.org/.

Галерея Automatic Image Montage with jQuery примечательна тем, что автоматически заполняет весь слой по горизонтали во всех “строках” фотографий. При этом адаптивна, то есть автоматически подстраивается под размер слоя.

Но есть минусы: в ней нет LightBox, то есть при нажатии на фотографию, мы не увидим увеличенной версии фотки. И не работает правильно с последней версией jQuery, поэтому наиболее известные плагины LightBox не прикрутим.

В статье будет последовательно рассказано о прикручивании лайтбокса TosRUs. Итоговый вариант будет отличаться то того, что есть в демо, так как там есть дополнительная верстка, текст перед загрузкой всех картинок. Но это вы можете посмотреть, глянув исходный текст демо.

Содержание

  • Подготовка
  • Редактирование файла index.html галереи
  • Добавление нужных файлов для работы LightBox
  • Прикручивание LightBox

Подготовка

Скачиваем со страницы галереи или отсюда:

AutomaticImageMontage.zip

Распакуем архив и откроем index.html.

2015-02-15_204146

Скачиваем плагин Lightbox тут или отсюда:

Responsive-Touch-Optimized-jQuery-Slider-Plugin-TosRUs.zip

Распаковываем, но пока не трогаем.

Редактирование файла index.html галереи

Вначале удалим слои header и content. Если хотите, то можете оставить, но, как по мне, они тут лишние.

2015-02-19_135012

2015-02-19_135036

Проставьте ссылки на большие версии рисунков ваших фотографий в слое am-container.

Я пока сделал ссылки на те же самые фотографии, но если вы будете потом свою галереи делать, то следите, чтобы в самой галереи были маленькие изображения, а по ссылке открывались большие по размеру. В противном случае галерея будет долго открываться (если везде будут большие по размеру картинки).

В итоге из этого:

2015-02-19_135334

получил вот это:

2015-02-19_140013

После слоя am-container находится подключение javascript библиотек и прописывание поведения данной галереи:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.montage.min.js"></script>
<script type="text/javascript">
$(function() {
/*
* just for this demo:
*/
$('#showcode').toggle(
function() {
$(this).addClass('up').removeClass('down').next().slideDown();
},
function() {
$(this).addClass('down').removeClass('up').next().slideUp();
}
);
$('#panel').toggle(
function() {
$(this).addClass('show').removeClass('hide');
$('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 );
},
function() {
$(this).addClass('hide').removeClass('show');
$('#overlay').stop().animate( { left : '0px' }, 300 );
}
);
 
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
 
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
fillLastRow : true,
alternateHeight : true,
alternateHeightRange : {
min : 90,
max : 240
}
});
 
/*
* just for this demo:
*/
$('#overlay').fadeIn(500);
}
}).attr('src',$img.attr('src'));
});
 
});
</script>

Объявление библиотек перенесем выше, а скрипт поменяем на другой. То есть вместе вышеприведенного кода добавим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
$(function() {
 
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
//$imgs = $container.find('img'),
totalImgs = $imgs.length,
cnt = 0;
 
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
$('#number_img').text(cnt.toString());
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
fillLastRow : true,
alternateHeight : true,
alternateHeightRange : {
min : 120,
max : 150
},
margin : 0
});
$('#load').css( "display", "none" );
}
}).attr('src',$img.attr('src'));
});
});
</script>

А объявления библиотек перенесем в head страницы:

1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.montage.min.js"></script>

2015-02-19_140504

В итоге получим работающую галерею, при клике на картинки которой будут открываться картинки, но не в Lightbox.

2015-02-19_140403

Добавление нужных файлов для работы LightBox

Теперь посмотрим, что у нас есть в архиве Lightbox:

2015-02-19_140931

Из папки lib файл FlameViewportScale.js переносим в папку js нашей библиотеки.

2015-02-19_141102

А из папки src копируем полностью папки js и css в папку с галерей:

2015-02-19_141209

В папку js галереи нужно еще скинуть версию jquery 1.7.2. Галерея с ней еще работает корректно, а Lightbox с ней уже работает.

http://code.jquery.com/jquery-1.7.2.min.js

В папку js галереи нужно еще скинуть библиотеку Hammer.JS (нужна для работы с LightBox):

http://cdn.jsdelivr.net/hammerjs/2.0.3/hammer.min.js

2015-02-19_141642

Прикручивание LightBox

Опять вернемся к редактированию index.html.

Поменяем подключение библиотеки jquery на более новую, то есть строчку:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

заменим на:

1
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Ниже добавим подключение следующих файлов:

1
2
3
4
  <script type="text/javascript" src="js/hammer.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/FlameViewportScale.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.tosrus.min.all.js"></script>
  <link type="text/css" media="all" rel="stylesheet" href="css/jquery.tosrus.all.css" />

2015-02-19_142117

И сразу после добавления этих строчек пропишем функцию, которая и свяжет рисунки из слоя am-container с LightBox:

1
2
3
4
5
6
7
  <script type="text/javascript" language="javascript">
   jQuery(function( $ ) {
   $('#am-container a').tosrus({
   });
 
   });
  </script>

2015-02-19_142339

Всё. Галерея полностью готова и работает. В самом начале статьи находится ссылка на получившиеся исходники и демо.

2015-02-19_143106


Статьи по теме:

  1. Elastic Grid - небольшие модификации плагина
  2. jQuery не работает в WordPress

Web программирование jQuery, Lightbox, Галерея

© 2014 Harrix