Работаем с сервисом Flickr на JavaScript

Большинство пользователей интернета знают о сервисе хранения цифровых фотографий Flikr. По информации Википедии количество загруженных на сервис фотографий превысило 6 миллиардов штук.
Постараемся использовать такой замечательный сервис для своего сайта. И, для начала, сделаем меню, один из пунктов которого будет разворачиваться в подпункты из названий сетов (альбомов) Flickr.
Основой меню будет динамическое темное меню, руководство по созданию которого можно посмотреть в блоге Ахмада Хания (Ahmad Hania).
Итак, начнем. Как всегда, HTML-основа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="RU">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="header">
		<div id="logo"></div>
		<div id="menu">
			<ul class="level1">
				<li><a href="index.html">Главная</a></li>
				<li id="sub">
					<a href="#">Портфолио</a>
					<ul class="level2">
						<li><a href="#">Альбом 1</a></li>
						<li><a href="#">Альбом 2</a></li>
					</ul>
				</li>
				<li id="news"><a href="#">Новости</a></li>
        		        <li id="last"><a href="#">Обо мне</a></li>
      	                </ul>
      	        </div>
	</div>
</body>
</html>

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

body {
	margin:0;
	padding:0;
	font-size:12px;
	font-family:verdana, Arial, Helvetica, sans-serif;
	color:#FFD600;
	background-color:#2D3134;
}
#menu {
	display: block;
	width: 650px;
	float: right;
}
ul.level1 {
    list-style: none;
    padding: 0;
    font-family: Arial;
    font-size: 14px;
    line-height: 14px;
    z-index:100;
}
ul.level1:after {
    content: "";
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
ul.level1 li {
    float: left;
    margin: 0 0 0 10px;
    position: relative;
}
ul.level1 li:first-child {
    margin: 0;
}
ul.level1 li a, ul.level1 li a:link {
    color: #161312;
    text-decoration: none;
    display: block;
    padding: 10px 26px;

    text-shadow: 0 1px 0 #4b433e;

    background: #362f2c; /* Old browsers */
    background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: inset 0 1px 0 #564b46,
                              0 1px 1px #181514;
    -moz-box-shadow: inset 0 1px 0 #564b46,
                           0 1px 1px #181514;
    box-shadow: inset 0 1px 0 #564b46,
                      0 1px 1px #181514;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
ul.level1 li a:hover {
    color: #73635e;

    text-shadow: 0 1px 1px #000;

    background: #282321; /* Old browsers */
    background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */
    /* Transition Effect */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

ul.level1 li a.selected, ul.level1 li a:active {
    color: #73635e;
    background: #282321;

    text-shadow: 0 1px 1px #000;

    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                        0 1px 0 #5e524f;
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                        0 1px 0 #5e524f;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                0 1px 0 #5e524f;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
ul.level1 li ul {
    display: none;
}
ul.level1 li:hover ul {
    position: absolute;
    display: block;
    z-index: 1000;
    left: 0;
    top: 44px;
    padding: 5px 0;
    list-style: none;
    background: #282321;

    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                        0 1px 0 #5e524f;
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                        0 1px 0 #5e524f;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
                0 1px 0 #5e524f;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

ul.level1 li ul:before {
    content: " ";
    position: absolute;
    display: block;
    z-index: 1500;
    left: 0;
    top: -10px;
    height: 10px;
    width: 100%;
}

ul.level1 li ul li {
    float: none;
    margin: 0 10px;
    border-bottom: 1px solid #191614;
    border-top: 1px solid #3a3230;
}
ul.level1 li ul li:first-child {
    margin: 0 10px;
    border-top: 0 none;
}
ul.level1 li ul li:last-child {
    border-bottom: 0 none;
}
ul.level1 li ul li a, ul.level1 li ul li a:link {
    color: #73635e;
    display: block;
    background: transparent none;
    padding: 10px 20px 10px 5px;
    white-space: nowrap;

    text-shadow: 0 1px 2px #000;

    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 0 rgba(0,0,0,0);

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
ul.level1 li ul li a:hover {
    text-decoration: underline;
    background: #2a2523;
}

На странице подключается библиотека jQuery и собственная библиотека, в которой реализован нужный нам функционал: работа с Flickr. Вот на этих скриптах мы остановимся подробнее.
Для работы с Flickr нужен API-key и номер пользователя. Заведем переменные для хранения.

var api_key = 'код';
var user_id      = 'ID';
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=?';

В последних двух строках ссылки на сервис Flickra для получения сетов (альбомами).
Добавляем обработчик загрузки документа:

$(document).ready(function(){
	makeGaleryMenu();
});

И главная функция формирования меню:

function makeGaleryMenu(){
	$.getJSON(sets_url,function(json){
		if(json.stat){
			var item_count = json.photosets.photoset.length;
			$('.level2').empty();
			var maxwidth = $("#sub").width();
			for (var i = 0; i < item_count; ++i) {
				var $elem  = $('<li />');
				var $link  = $('<a href="#" />');
				$link.data({
					'setName'	:json.photosets.photoset[i].title._content,
					'id'		:json.photosets.photoset[i].id
				});
				$elem.append($link.append($link.data('setName')));
				if($elem.width>maxwidth){
					maxwidth =$elem.width();
				}

				$('.level2').append($elem);
				$elem.css({'width':$('.level2').css('width')});
				$('.level2').css({'width':maxwidth+25});
				$('.level2 li').each(function(){
					$(this).css({'width':maxwidth});
				});

			}
		}
	});
}

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

P.S.: Встречал на одном блоге возможность сворачивать исходники в тексте поста и разворачивать при необходимости. Узнать бы, как называется плагин.

Share|

Нет похожих сообщений.

Записки вебразработчика. Статьи об интернете, сайтостроении и оптимизации.

Работаем с сервисом Flickr на JavaScript

Информация

Последние записи

Последние комментарии

Подписаться на мой фид

Облако тегов

Ссылки