Автор

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

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


 

Вы бы хотели создать панель для сайта которая будет содержать фотографии, но при этом панель будет скрыта. Это весьма удобно, ведь визуальное оформления ресурса не загромождается, а это, безусловно, плюс для сайта. Ведь множество информации на сайте приводит к плохой организации ресурса, и посетитель попросту не хочет находится на такой помойке, а не сайте. В данном уроке мы рассмотрим нечто необычный подход к организации галереи, а именно создания фотопанели для сайта с помощью 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);
 }
 });
}

 

Мы рассмотрели основные функции, детально можно потрогать все файлы в исходниках.

 

Вот и все. Готово!

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


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

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

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


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

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


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

После некоторого перерыва наш блог возвращается в предыдущий ритм жизни, для того чтобы радовать своих посетителей новыми уроками. И первым уроком в данном месяце станет создание отличной сеточной галереи миниатюр с возможностью различной навигации, для этого мы будем использовать Grid Navigation. В примере мы рассмотрим сразу 10 вариантов переключения между страницами и реакции на прокручивание колесика мыши.


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close