Среда, 13 Июня 2012 12:28

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

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

Ранее я уже писала о том, как сделать галерею изображений в лайтбоксе. Эта статья находится здесь

 

Там рассматривается вариант, когда есть большие картинки. На странице мы стилями сделами им маленькие размеры, а в лайтбоксе выводили оригиналы.

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

 

В данном случае у нас есть большая картинка и ее обрезанная копия. Допустим, у большой картинки имя img.jpg, а у мальнькой - s_img.jpg. Мы выводим на страницу img.jpg, а в лайтбокс - s_img.jpg.

 

HTML имеем такой же. Только вывод осуществляется для маленьких картинок.

 

 

<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>
 
                <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/s_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/s_home_slider2.jpg"></a>
                            <div class="date">3 Мая 2012, 14:11 </div>
                            <div class="desc">2 Название фотографии или краткое описание к ней.</div>
                        </div>
 
                     ...
 
                    </div>
                </div>
 
 

CSS тоже не изменился:

 

 

.gallery_bg {
background: #000; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9; 
opacity: 0.9;
}
 
.gallery_inner {
height: auto;
margin: 175px auto 0;
position: relative;
background: #fff;
z-index: 999;
padding: 5px 20px 5px 20px;
}

...

 

 

jQuery уже интереснее. Точнее для вывода даты и описания он остался прежним, изменился для вывода картинки.

 

 
var imgs = new Array;
for(i=0;i<n;i++){
imgs[i] = $('.gallery .gallery_item').eq(i).children('a').children('img').attr('src').replace('s_','');
}
 
for(i=0;i<n;i++){
$('.gallery_cont .gallery_inner .gallery_img').append('<div class="gallery_item_img"><img src="'+imgs[i]+'" /></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>');
}
 
Определяем новый массив imgs, который будет содержать пути к нашим картинкам. 
 
 
imgs[i] = $('.gallery .gallery_item').eq(i).children('a').children('img').attr('src')
 
 
Поскольку мы точно знаем как работает на сайте кроп, то знаем как называется картинка и ее обрезаный вариант. Здесь мы рассматриваем случай добавления к названию маленькой картинки s_. Потому для вывода в лайтбоксе большой, мы берем пути (src) к маленьким и убираем из них "s_". Потому массив imgs задается полностью так:
 
 
imgs[i] = $('.gallery .gallery_item').eq(i).children('a').children('img').attr('src').replace('s_','');
 
 
А теперь в нужный блок лайтбокса мы ставим картинки с измененными путями:
 
 
$('.gallery_cont .gallery_inner .gallery_img').append('<div class="gallery_item_img"><img src="'+imgs[i]+'" /></div>');
 
 
Мы и в прошлом случае в блок gallery_img добавляли блок gallery_item_img, а теперь ставим туда картинку <img />  у которой путь src="/" равен соответствующему элементу массива img.
 

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

 

 

 

You have no rights to post comments

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