Среда, 23 Мая 2012 14:12

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

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

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

"Фотография 1 из 10"

 

 

 

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

 

На самой странице выводим наши фотографии. Я вывела большие фотки и уменьшила их стилями. Если же в галерею добавляются изображения динамически, то на страницу можно выводить маленькие, а в галерею большие.

Также я вывожу описание и дату, а потом скрываю их стилями. Это просто для того, чтобы эти описания физически были. Опять таки, их можно выводить только в галерее.

Доступен вывод любого количества изображений, скрипт будет их считать и работать относительно их количества.

 

 

HTML:
 
 <div class="center">     
         <div class="block page">
                <div class="block_body">
                 <div class="gallery_page top_info">
                     <div class="date left">3 Мая 2012, 14:11 </div>
                        <div class="clear"></div>
                    </div>
                    <div class="gallery_page news_item">
                     <div class="name"><h1>Описание галереи</h1></div>
                        <div class="text"><p>Здесь выводятся очень красивые фотки</p></div>
                    </div>
                    <div class="gallery">
                     <div class="gallery_item">
                     <a href="#"><img src="/images/home_slider1.jpg"></a>
                            <div class="date">2 Мая 2012, 14:11 </div>
                            <div class="desc">1 Название фотографии или краткое описание к ней.</div>
                        </div>
                     <div class="gallery_item">
                     <a href="#"><img src="/images/home_slider2.jpg"></a>
                            <div class="date">3 Мая 2012, 14:11 </div>
                            <div class="desc">2 Название фотографии или краткое описание к ней.</div>
                        </div>
                     <div class="gallery_item">
                     <a href="#"><img src="/images/home_slider5.jpg"></a>
                            <div class="date">4 Мая 2012, 14:11 </div>
                            <div class="desc">10 Название фотографии или краткое описание к ней.</div>
                        </div>
                    </div>
                </div>
            </div>         
        </div>
 
 

Для реализации лайтбокса прописываем его структуру вначале или в конце body, чтобы на него не действовал чей-то стиль с относительным позиционированием.

 

HTML body:

 

 

<div class="gallery_cont">
    <div class="gallery_bg"></div>
    <div class="gallery_inner">
    <a href="#" class="g_next"><span class="g_next_icon"></span></a>
        <a href="#" class="g_prev"><span class="g_prev_icon"></span></a>
        <a href="#" class="g_close"><span class="g_close_icon"></span></a>
    <div class="gallery_top">
        <div class="left date">Фотография <span class="itemnum">1</span> из <span class="itemcount">29</span></div>
            <div class="right date"></div>
            <div class="clear"></div>
        </div>
        <div class="gallery_img"></div>
        <div class="gallery_img_desc"></div>
        <div class="clear"></div>
    </div>
</div>
 
 
 
То есть, вывод изображений на странице может быть реализован в любом месте, в сама структура лайтбокса должна быть за пределами структуры страницы. 
 
 
На всякий случай привожу свои стили. Мы скрываем в галерее все пунткты. Скриптом будем показывать именно нужный. Также здесь будут показаны стили для стрелочек вправо и влево, а также крестика.
 
CSS:
 
 
.g_close {position: absolute; top: 0px; right: -100px; width: 100px; height: 125px; z-index: 1001;} - поле, кликнув по которому будем закрывать лайтбокс
.g_close .g_close_icon {display: block; width: 9px; height: 9px; background: url(../images/g_close.png) 0 0 no-repeat; position:absolute; top: 20px; right: 50px;} - стили для кнопки "Закрыть"
.g_close:hover .g_close_icon {background-position: 0 -9px;}
 
 
.g_next, .g_prev {position: absolute; width: 100px; height: 100%; z-index: 1000;} - стили для областей переключения изображений
.g_prev {top: 0px; left: -100px;}
.g_next {right: -100px; top: 125px;}
.g_next .g_next_icon, .g_prev .g_prev_icon {background: url(../images/g_arrows.png) 0 0 no-repeat; width: 7px; height: 12px; display: block; } - стрелочки для переключения изображений
.g_next .g_next_icon {background-position: -7px 0; position:absolute; top: 50px; right: 50px;}
.g_next:hover .g_next_icon {background-position: -7px -12px;}
.g_prev .g_prev_icon {background-position: 0 0; position:absolute; top: 175px; left: 50px;}
.g_prev:hover .g_prev_icon {background-position: 0 -12px;}
 
.gallery_cont .gallery_inner .gallery_img .gallery_item_img, .gallery_cont .gallery_inner .gallery_img .gallery_item_img .desc, .gallery_cont .gallery_inner .gallery_img .gallery_item_img .date, .gallery_cont .gallery_inner .gallery_img_desc .gallery_item_desc, .gallery_cont .gallery_inner .gallery_top .right .gallery_item_date {display: none;} - скрываем все блоки, чтобы показывать только нужный
 
 
 
Ну а теперь разберем сам скрипт. Привожу его текст полностью. Потом опишу подробно.
 
JS:
 
 
$(document).ready(function(){
var n = $('.gallery .gallery_item').size();
var c = new Array;
var p2;
for(i=0;i<n;i++){
$('.gallery_cont .gallery_inner .gallery_img').append('<div class="gallery_item_img">'+$('.gallery .gallery_item').eq(i).html()+'</div>');
$('.gallery_cont .gallery_inner .gallery_img_desc').append('<div class="gallery_item_desc">'+$('.gallery .gallery_item').eq(i).children('.desc').text()+'</div>');
$('.gallery_cont .gallery_inner .gallery_top .right').append('<div class="gallery_item_date">'+$('.gallery .gallery_item').eq(i).children('.date').text()+'</div>');
}
 
function slideShow(a, counter) {
$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_img_desc .gallery_item_desc').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_top .right .gallery_item_date').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_top .left .itemnum').text(a+1);
$('.gallery_cont .gallery_inner .gallery_top .left .itemcount').text(n);
}
function slideHide(b) {
$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').eq(b).fadeOut(0);
$('.gallery_cont .gallery_inner .gallery_img_desc .gallery_item_desc').eq(b).fadeOut(0);
$('.gallery_cont .gallery_inner .gallery_top .right .gallery_item_date').eq(b).fadeOut(0);
}
 
function slideHideAll() {
$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').fadeOut(0);
$('.gallery_cont .gallery_inner .gallery_img_desc .gallery_item_desc').fadeOut(0);
$('.gallery_cont .gallery_inner .gallery_top .right .gallery_item_date').fadeOut(0);
}
 
$('.gallery .gallery_item').click(function(){
var p = $(this).index();
p2 = p;
$('.gallery_cont').fadeIn(500);
$('.gallery_cont .gallery_inner').width($('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').width());
slideHideAll();
slideShow(p,n);
});
 
$('.g_next').click(function(){
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
});
 
$('.g_prev').click(function(){
if(p2>0) {
slideHide(p2);
slideShow(p2-1,n);
p2=p2-1;
}
});
 
 
 
$('.g_close').click(function(){
$('.gallery_cont').fadeOut(0);
});
$('.gallery_bg').click(function(){
$('.gallery_cont').fadeOut(0);
});
});
 
 
Разбираем скрипт:
 
 
var n = $('.gallery .gallery_item').size();
 
 
Считаем количество фотографий (изображений) на странице.
 
 
for(i=0;i<n;i++){
$('.gallery_cont .gallery_inner .gallery_img').append('<div class="gallery_item_img">'+$('.gallery .gallery_item').eq(i).html()+'</div>');
$('.gallery_cont .gallery_inner .gallery_img_desc').append('<div class="gallery_item_desc">'+$('.gallery .gallery_item').eq(i).children('.desc').text()+'</div>');
$('.gallery_cont .gallery_inner .gallery_top .right').append('<div class="gallery_item_date">'+$('.gallery .gallery_item').eq(i).children('.date').text()+'</div>');
}
 
 
В определенные места галереи, описанной за пределами структуры страницы, добавляем информацию с тела страницы, которую нужно будет выводить - картинка, описание, дата.
 
 
function slideShow(a, counter) {
$('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_img_desc .gallery_item_desc').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_top .right .gallery_item_date').eq(a).fadeIn(500);
$('.gallery_cont .gallery_inner .gallery_top .left .itemnum').text(a+1);
$('.gallery_cont .gallery_inner .gallery_top .left .itemcount').text(n);
}
 
 
Описываем функцию slideShow, которая зависит от двух параметров. Первый параметр - порядковый номер изображения, второй - количество изображений.
Эта функция выводит скрытые ранее фотографию, описание и дату изображения и заданным порядковым номером. Она также выводит в счетчик изображений в галерее этот порядковый номер и полное количество изображений.
"Фотография 1 из 10"
 
Функция slideHide(b) аналоничным образом скрывает изображение с заданным номером. Функция slideHideAll()  скрывает все изображения.
 
 
$('.gallery .gallery_item').click(function(){
var p = $(this).index();
p2 = p;
$('.gallery_cont').fadeIn(500);
$('.gallery_cont .gallery_inner').width($('.gallery_cont .gallery_inner .gallery_img .gallery_item_img').width());
slideHideAll();
slideShow(p,n);
});
 
 
При клике на изображение на странице, мы показываем саму галерею $('.gallery_cont').fadeIn(500), скрываем все изображения и отображаем то, на котором был клик.
 
 
$('.g_next').click(function(){
if(p2<n-1) {
slideHide(p2);
slideShow(p2+1,n);
p2=p2+1;
}
});
 
 
При клике на стрелочку вправо отображается следующее изображение. Для этого скрываем то, что было показано и показываем изображение со следующим порядковым номером p2=p2+1.
 
Аналогично реализовуем переключение на предыдущее изображение.
 
 
$('.g_close').click(function(){
$('.gallery_cont').fadeOut(0);
});
 
 
При клике на крестик ("Закрыть"), скрываем галерею.
 
 
Подключние jQuery, файла стилей и скрипта:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/gallery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/style/gallery.css">
 
 
 
Получилось мало текста, много кода. Здесь описано реализацию конкретной задачи. Если что-то не понятно. есть вопросы или замечания, пиши в комментах. С удовольствием отвечу!
 
 

You have no rights to post comments

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