Автор

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

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

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


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

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


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

Как высказался руководитель компании UMIHOST в своем блоге Антон Приходько – Все студии и фрилансеры, занимающиеся изготовлением сайтов, где-то эти сайты в итоге размещают. Редко клиент сам заботится о хостинге своего сайта, а тем более, занимается собственно размещением сайта — чаще всего сайт живет там, куда его «поселил» изготовитель.

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

  1. Как выбрать место размещения сайта таким образом, чтобы не опростоволоситься в глазах заказчика? Чем стабильнее будет работать сайт, тем больше доверия к изготовителю: и карма от этого улучшается, и доверие в итоге окупается.
  2. Как выбрать место для размещения сайта таким образом, чтобы сайт не только стабильно работал, но еще и приносил своему создателю выгоду?

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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close