Вторник, 19 Июня 2012 10:43

Галерея изображений в лайтбоксе. Часть 3

Written by 
Оцени эту запись
(2 Голоса)

 

Уже третья статья на эту тему. Она явялется продолжением статьи Галерея изображений в лайтбоксе. Часть 2

 

Здесь расскажу как сделать перелистывание фоток кликами на стрелки вправо и влево, закрытие лайтбокса при клике на Esc и листалка кликами по фоткам. 

 

Html, Css  и большая часть js те же. Добавилось не сколько строк.

 

 

$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').click(function(){
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
});
 
 
 
$(document).bind('keydown', function(e) { 
if (e.which == 27) {
$('.gallery_cont').fadeOut(0);
}
if (e.which == 37) {
if(p2>0) {
slideHide(p2);
slideShow(p2-1,n);
p2=p2-1;
}
}
if (e.which == 39) {
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
}
}); 
 
 
 
При клике на фотку делаем такую же реакцию, что и при клике на стрелку лайтбокса вправо. То есть
 
 
$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').click(function(){
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
});
 
 
Реакция та же, только привязывается она к другому событию.
 
Теперь работаем с клавишами. Нас интересуют стралки влево и вправо и клавиша Esc. 
 
Гегление дало нам коды этих клавиш:
 
  • Esc - 27
  • Стрелка влево - 37
  • Стрелка вправо - 39
 
Кликам на эти клавиши привязываем реакцию переключения между слайдами на предыдущий и следующий и закрытие лайтбокса при клике на Esc.
 
 
$(document).bind('keydown', function(e) { 
if (e.which == 27) {
$('.gallery_cont').fadeOut(0);
}
if (e.which == 37) {
if(p2>0) {
slideHide(p2);
slideShow(p2-1,n);
p2=p2-1;
}
}
if (e.which == 39) {
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
}
}); 
 
Bind  .bind () - универсальный обработчик событий. В нем прописывается событие и фукнция, которая при этом должна выполниться. У меня событие -  keydown - нажатие кнопки. Выполняется функция, которая берет параметр e в виде кода кнопки, на которую был клик.
 
Теперь проверяем:
если код кнопки 27, закрываем лайтбокс (копипаст клика по g_close из предыдущей статьи) 
если код кнопки 37, показываем предыдущую картинку (копипаст клика по g_prev из предыдущей статьи) 
если код кнопки 39, показываем следующую фотку (копипаст клика по g_next из предыдущей статьи) 
 

Демо - Галерея изображений в лайтбоксе

 

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов