Продолжим работать с сервисом Flickr. Ранее мы сформировали с помощью JavaScript динамическое меню, к одному из пунктов которого в качестве подпунктов добавили названия сетов (альбомов), которые хранятся в сервисе Flickr.
Сейчас мы рассмотрим вывод фотографий каждого из сетов в зависимости от выбора посетителя.

Инструментарий.

Для вывода изображений будем использовать фрэймворк Galleria. Эта библиотека использует JQuery и в бесплатном варианте имеет достаточную функциональность. Но, самое главное для нас — она работает с сервисом Flickr.

Загружаем архив с сайта и разворачиваем файлы из архива в папку нашего сайта.

HTML.

Здесь изменения минимальны — добавляем строки подключения библиотеки и плагина, работающего с Flickr в заголовок файла:

<script type="text/javascript" src="galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="galleria.flickr.min.js"></script>

И перед закрывающим тегом </body> добавляем элементы страницы, в которых и разместим галерею фотографий:

<div id="content">
     <div id="gallery">
     </div>
</div>

CSS

Внесем изменения в таблицу стилей. Добавим стиль для блока header и вновь добавленных блоков:

#header {
	display: block;
	float: left;
	width: 100%;
	height: 100px;
}
#content {
	display: block;
	float: left;
	width: 100%;
	height: 480px;
}

#gallery {
	width: 480px;
	margin: 20px auto;
	height: 480px;
}

Здесь существенным является задание высоты блока, в котором будет размещаться наша галерея (в нашем случае — gallery).
Связка 

width: 480px; margin: 20px, auto;

позволяет разместить нашу галерею в центре экрана.

JavaScript

Теперь перейдем к коду.
В начале нашей процедуры обработки по загрузке документа добавляем подключение темы галереи. Для бесплатного использования распространяется тема «classic».

Galleria.loadTheme('themes/classic/galleria.classic.min.js');

Добавим функцию, которая создает галерею из фотографий альбома Flicr. В функцию будем передавать ИД альбома:

function loadImages(set_id){
	$('#gallery').galleria({
       flickr: 'set:' + set_id,
       flickrOptions: {
        	sort: 'date-posted-asc'

    	}
	});
}

И вызов этой функции добавим в два места нашей функции по созданию динамического меню makeGaleryMenu:
Один раз вызовем функцию loadImages после создания динамического меню для показа случайной галереи:

var idn = Math.floor(Math.random()* item_count + 1);
photo_set_id = $('ul.level2 li:nth-child(' + idn + ') a').data('id');
loadImages(photo_set_id);

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

$link.bind('click',function(e){
	var $this = $(this);
	if (photo_set_id != $this.data('id')) {
		photo_set_id = $this.data('id');
		loadImages(photo_set_id);
	}
});

Вот и все. Посмотреть результат можно здесь.

Share|

Похожие сообщения:

  1. Работаем с сервисом Flickr на JavaScript
просмотров:799