Автор

Фотопанель для сайта на 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

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

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


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

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close