Автор

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



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

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

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


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

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close