Фотопанель для сайта на jQuery

jQuery 08.04.2013

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

ДЕМО

ИСХОДНИКИ

Для нашей демонстрации мы использовали удивительные фотоработы от tibchris. И так, давайте приступим.

Шаг 1. HTML

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


<div class="flickr_photobar">

 
 <div id="flickr_overlay" class="overlay" style="display:none;"></div>

 
 <div id="flickr_photopreview" class="photopreview" style="display:none;">
 <div class="preview_wrapper">
 <div class="preview">
 <div class="loading"></div>
 <div id="preview_close" class="close"></div>
 <span id="large_phototitle"></span>
 
 <a href="#" class="img_next"></a>
 <a href="#" class="img_prev"></a>
 </div>
 </div>
 </div>

 
 <div id="photobar" class="photobar">

 
 <div class="thumbs albums" id="sets">
 <a href="#" class="prev"></a>
 <div class="thumbsWrapper">
 <ul></ul>
 </div>
 <a href="#" class="next"></a>
 </div>

 
 <div class="thumbs images" id="images" style="bottom:-125px;">
 <a href="#" class="prev"></a>
 <div class="thumbsWrapper">
 <ul></ul>
 </div>
 <a href="#" class="next"></a>
 
 <span class="images_toggle">
 Set:
 <span id="setName"></span>
 <a id="images_toggle">Back to Sets</a>
 </span>
 </div>

<a id="flickr_toggle" class="toggle">
 Flickr Фотопанель
 <span style="visibility:hidden;" class="loading_small"></span>
 </a>
 </div>

</div>

Как вы можете видеть, многие элементы будут скрыты в начале. В функции JavaScript мы будем управлять видимостью и внешним видом этих элементов.

Шаг 2. CSS

Так как мы хотим? чтобы фотопанель работала на всех страницах сайта, мы добавим большинство элементов в фиксированном положении. Если вы столкнетесь с некоторыми проблемами относительно других элементов на веб-сайте, которые находятся в этой галерее, вы можете настроить z-indexes.

Итак, давайте определим некоторые общие стили.

.flickr_photobar{
 font-family:Arial,Helvetica,sans-serif;
 text-transform:uppercase;
 font-size:11px;
}
.flickr_photobar a{
 outline:none;
}
.flickr_photobar a:hover{
 outline:none;
}

DIV photobar будет иметь следующий стиль.

.photobar{
 position:fixed;
 bottom:-96px;
 left:0px;
 width:100%;
 height:95px;
}

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

.thumbs a.prev,
.thumbs a.next{
 width:20px;
 height:83px;
 position:absolute;
 top:4px;
 margin:0px;
 z-index:10;
 border:1px solid #222;
 -moz-box-shadow:0px 0px 1px #777 inset;
 -webkit-box-shadow:0px 0px 1px #777 inset;
 box-shadow:0px 0px 1px #777 inset;
}
.thumbs a.prev:hover,
.thumbs a.next:hover{
 background-color:#404040;
}
.thumbs a.prev{
 left:0px;
 background:#333 url(../prev.png) no-repeat center center;
}
.thumbs a.next{
 right:0px;
 background:#333 url(../next.png) no-repeat center center;
}

Оболочка для миниатюр будет иметь следующий стиль.

.thumbs .thumbsWrapper{
 height:95px;
 left:22px;
 right:22px;
 overflow:hidden;
 position:absolute;
 top:0;
}

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

.thumbs ul{
 list-style:none;
 margin:0px;
 padding:0px;
 height:90px;
 overflow:hidden;
 position:absolute;
 left:0px;
 top:0px;
}
.thumbs ul li a{
 position:relative;
 float:left;
 margin:6px 2px 0px 2px;
 color:#fff;
 text-shadow:1px 1px 1px #000;
 text-decoration:none;
 height:81px;
 width:81px;
}

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

.albums ul li a img{
 border:3px solid #111111;
 -moz-box-shadow:1px 1px 3px #000;
 -webkit-box-shadow:1px 1px 3px #000;
 box-shadow:1px 1px 3px #000;
}
.images ul li a img{
 border:3px solid #f9f9f9;
 -moz-box-shadow:1px 1px 3px #000;
 -webkit-box-shadow:1px 1px 3px #000;
 box-shadow:1px 1px 3px #000;
}

Нам необходимо показать описание для миниатюр - когда мы наведите курсор мыши на изображение.

.thumbs a:hover span{
 display:block;
}

Рукоятки для фотопанели будут иметь следующий стиль.

span.images_toggle{
 position:absolute;
 top:-26px;
 right:20px;
 background-color:#3D3D3D;
 border:1px solid #222;
 color:#EEEEEE;
 font-size:10px;
 padding:0px 6px 0px 12px;
 height:24px;
 line-height:24px;
 text-transform:uppercase;
 text-shadow:1px 1px 2px #000;
 -moz-box-shadow:0px -1px 3px #ccc;
 -webkit-box-shadow:0px -1px 3px #ccc;
 box-shadow:0px -1px 3px #ccc;
 -moz-border-radius:5px 5px 0px 0px;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
span.images_toggle a{
 background-color:#222;
 border:1px solid #000;
 cursor:pointer;
 line-height:16px;
 padding:0px 5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
}
span.images_toggle a:hover{
 background-color:#000;
}
.photobar a.toggle{
 position:absolute;
 top:-26px;
 left:20px;
 background-color:#3D3D3D;
 border:1px solid #222;
 color:#EEEEEE;
 font-size:10px;
 padding:0px 36px 0px 36px;
 line-height:24px;
 height:24px;
 text-transform:uppercase;
 text-shadow:1px 1px 2px #000;
 -moz-box-shadow:0px -1px 3px #ccc;
 -webkit-box-shadow:0px -1px 3px #ccc;
 box-shadow:0px -1px 3px #ccc;
 -moz-border-radius:5px 5px 0px 0px;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
 cursor:pointer;
}
span.loading_small{
 background:transparent url(../loading_small.gif) no-repeat center center;
 position:absolute;
 right:10px;
 top:0px;
 width:16px;
 height:24px;
}
.photobar a.toggle:hover{
 background-color:#111;
}

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

.flickr_photobar .overlay{
 z-index:90;
 background-color:#000;
 width:100%;
 height:100%;
 position:fixed;
 top:0px;
 left:0px;
 opacity:0.9;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

Фотопанель остается в неизменном положении когда пользователь прокручивает страницу, она всегда остается в видимой части страницы

.photopreview{
 text-align:center;
 position:fixed;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 z-index:91;
}

Описание для изображения будут помещены в панель, которая крепится в верхней части страницы.

.photopreview .preview span{
 background-color: #111111;
 color:#FFFFFF;
 height:20px;
 left:0;
 line-height:20px;
 position:fixed;
 text-align:center;
 text-shadow:1px 1px 1px #000000;
 top:0;
 width:100%;
 -moz-box-shadow:1px 1px 5px #000000;
 -webkit-box-shadow:1px 1px 5px #000000;
 box-shadow:1px 1px 5px #000000;
}

Теперь необходимо добавить кнопку закрытия при просмотре изображения.

.close{
 background:#000 url(../close.png) no-repeat center center;
 cursor:pointer;
 height:20px;
 position:fixed;
 right:-11px;
 top:0;
 width:90px;
 z-index:1000;
 cursor:pointer;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
 opacity:0.8;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

Следующий и предыдущий элементы управления будут иметь следующие стили.

.photopreview a.img_next,
.photopreview a.img_prev{
 position:fixed;
 top:50%;
 height:60px;
 width:50px;
 margin-top:-30px;
 background-color:#000;
 background-repeat:no-repeat;
 background-position:center center;
}
.photopreview a.img_next{
 background-image:url(../next.png);
 -moz-border-radius:20px 0px 0px 20px;
 -webkit-border-top-left-radius:20px;
 -webkit-border-bottom-left-radius:20px;
 border-top-left-radius:20px;
 border-bottom-left-radius:20px;
 right:0px;
}
.photopreview a.img_prev{
 background-image:url(../prev.png);
 -moz-border-radius:0px 20px 20px 0px;
 -webkit-border-top-right-radius:20px;
 -webkit-border-bottom-right-radius:20px;
 border-top-right-radius:20px;
 border-bottom-right-radius:20px;
 left:0px;
}

Со стилями закончили, давайте перейдем к следующему шагу.

Шаг 3. JavaScript

Давайте начнем c общего выполнения сценария, где мы должны определить несколько переменных, кроме этого вы должны зарегистрироваться Flickr Services website. И получить ваши API коды.

var api_key = [your API Key];
var user_id = [your Flickr user ID];
/*
Размер миниатюры, малый, средний или оригинальный,
Большой размер изображение, которое вы хотите загрузить!
*/
var large_image_size = 'Medium';

/*
Текущий набор ID / идентификатор текущего Фото
*/
var photo_set_id,photo_id;
/*
текущее положение изображения /*
var current = -1;
var continueNavigation = false;

/*
flickr API вызов
*/
var sets_service = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getList' + '&api_key=' + api_key;
var sets_url = sets_service + '&user_id=' + user_id + '&format=json&jsoncallback=?';

/*
Flickr API вызова, чтобы получить список фотографий из набора
*/
var photos_service = 'http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos' + '&api_key=' + api_key;

/*
Flickr API вызова, чтобы получить список Размеры фото
*/
var large_photo_service = 'http://api.flickr.com/services/rest/?&method=flickr.photos.getSizes' + '&api_key=' + api_key;

/*
elements caching...
*/
var $setsContainer = $('#sets').find('ul');
var $photosContainer = $('#images').find('ul');
var $photopreview = $('#flickr_photopreview');
var $flickrOverlay = $('#flickr_overlay');
var $loadingStatus = $('#flickr_toggle').find('.loading_small');

var ul_width,spacefit,fit;

Следующая функция для загрузки фотографий определенного набора, который выбрали на сайте.

/*
Загрузка изображения
*/
function LoadPhotos(){
 $photosContainer.empty();
 $loadingStatus.css('visibility','visible');
 var photos_url = photos_service + '&photoset_id=' + photo_set_id + '&media=photos&format=json&jsoncallback=?';

 $.getJSON(photos_url,function(data){
 if(data.stat != 'fail') {
 var photo_count = data.photoset.photo.length;
 /*
 adapt ul width based on number of results
 */
 var photo_count_total = photo_count + $photosContainer.children('li').length;
 ul_width = photo_count_total * 85 + 85;
 $photosContainer.css('width',ul_width + 'px');

 for(var i = 0; i < photo_count; ++i){
 var photo = data.photoset.photo[i];
 var photoid = photo.id;

 var secret = photo.secret;
 var server = photo.server;
 var farm = photo.farm;

 var photoUrl = 'http://farm'+farm+'.static.flickr.com/'+server+'/'+photoid+'_'+secret+'_s.jpg';

 var $elem = $('<li />');
 var $link = $('<a class="toLoad" href="#" />');

 $link.data({
 'photoid' :photoid,
 'secret' :secret,
 'server' :server,
 'farm' :farm,
 'photoUrl' :photoUrl,
 'photo_title' :photo.title
 });
 $photosContainer.append($elem.append($link));

 $link.bind('click',function(e){
 var $this = $(this);
 current = $this.parent().index();
 photo_id = $this.data('photoid');
 LoadLargePhoto();
 e.preventDefault();
 });
 }
 LoadPhotosImages();
 }

 });
}

function LoadPhotosImages(){
 var toLoad = $('.toLoad:in-viewport').size();
 if(toLoad > 0)
 $loadingStatus.css('visibility','visible');
 var images_loaded = 0;

 $('.toLoad:in-viewport').each(function(i){
 var $space = $photosContainer.find('.toLoad:first');
 var $img = $('<img style="display:none;" />').load(function(){
 ++images_loaded;
 if(images_loaded == toLoad){
 $loadingStatus.css('visibility','hidden');
 $photosContainer.find('img').fadeIn();
 /*
 Навигация с миниатюр
 */
 if(continueNavigation){
 continueNavigation = false;
 var $thumb = $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
 photo_id = $thumb.attr('alt');
 LoadLargePhoto();
 }
 }
 }).attr('src',$space.data('photoUrl'))
 .attr('alt',$space.data('photoid'));

 var $photo_title = $('<span/>',{'html':$space.data('photo_title')});
 $space.append($photo_title).append($img).removeClass('toLoad');
 });
}

Теперь нам нужна функция, которая загружает большие изображения.

/*
Загрузка больших изображений
*/
function LoadLargePhoto(){
 removeLargeImage();

 var $theThumb = $photosContainer.find('li:nth-child(' + parseInt(current + 1) + ')').find('img');
 var photo_title = $theThumb.parent().data('photo_title');

 var $loading = $photopreview.find('.loading');
 $loading.show();
 $photopreview.show();
 $flickrOverlay.show();
 $('#preview_close').show();

 var large_photo_url = large_photo_service + '&photo_id=' + photo_id + '&format=json&jsoncallback=?';
 $.getJSON(large_photo_url,function(data){
 if(data.stat != 'fail') {
 var count_sizes = data.sizes.size.length;
 var largest_photo_src;
 for(var i = 0; i < count_sizes; ++i){
 if(data.sizes.size[i].label == large_image_size)
 largest_photo_src = data.sizes.size[i].source;
 }
 $('<img />').load(function(){
 var $this = $(this);
 /*
 Изменить размер окна под размер браузера
 */
 resize($this);

 $loading.hide();
 /*just to make sure there's no image:*/
 removeLargeImage();
 $photopreview.find('.preview').append($this);
 $('#large_phototitle').empty().html(photo_title);
 }).attr('src',largest_photo_src);
 }
 });
}