Делаем плагин jQuery для слайдшоу фотографий с сайта Flickr

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqFlick - Плагин слайдер Flickr | Демонстрация для сайта RUSELLER.COM</title>

<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="/assets/jqFlick/jqFlick.css" />

</head>
<body>

<div id="page">

	<h1>Слайдер для галерей с сайта Flickr</h1>
    
	<div id="flickrSlider"></div>

	<p class="demos">Вариант демонстрации: <select>
    		<option value="1" selected>Пример презентации</option>
        	<option value="2">Слайдшоу</option>
        	<option value="3">Фотографии продукта</option>
    	</select></p>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="/assets/jqFlick/jqFlick.js"></script>
<script src="/assets/js/script.js"></script>

</body>
</html>

<div id="flickrSlider" class="flickrSliderHolder" style="width: 500px; height: 345px;">
	<span class="caption"></span>
	<ul style="width: 1000px; height: 320px; left: 0px;">
		<li style="background-image: url('/example.jpg'); width: 500px;"></li>
		<li style="background-image: url('/example2.jpg'); width: 500px;"></li>
	</ul>
	<div class="arrows">
		<a class="previous" href="#"></a>
		<a class="next" href="#"></a>
	</div>
</div>

.flickrSliderHolder{
	position:relative;
	overflow:hidden;
}

.flickrSliderHolder ul{
	position:absolute;
	height:100%;
	list-style:none;
}

.flickrSliderHolder ul li{
	float:left;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
}

.flickrSliderHolder .arrows{
	position:absolute;
	right:0;
	bottom:0;
}

.flickrSliderHolder .arrows a{
	width:22px;
	height:22px;
	float:left;
	background:url('arrows.png') no-repeat top left;
	text-decoration:none;
	outline:none;
	border:none;
}

.flickrSliderHolder a.previous:hover{
	background-position:left bottom;
}

.flickrSliderHolder a.next{
	margin-left:-1px;
	background-position:top right;
}

.flickrSliderHolder a.next:hover{
	background-position:bottom right;
}

.flickrSliderHolder .caption{
	font-size:13px;
	line-height: 22px;
	position:absolute;
	bottom:0;
	left:0;
}

{
    "query": {
        "count": 3,
        "created": "2011-02-19T20:11:18Z",
        "lang": "en-US",
        "results": {
            "photo": [{
                "farm": "6",
                "id": "5456788328",
                "isprimary": "1",
                "secret": "e9eddccf8e",
                "server": "5213",
                "title": "The title of the image becomes an optional caption."
            }, {
                "farm": "6",
                "id": "5456179165",
                "isprimary": "0",
                "secret": "28bae85307",
                "server": "5216",
                "title": "There are no limits really."
            }, {
                "farm": "6",
                "id": "5456179233",
                "isprimary": "0",
                "secret": "e05287691f",
                "server": "5018",
                "title": "What more do you need.."
            }]
        }
    }
}

http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg

(function($){

	$.fn.jqFlick = function(options){
		
		// Опции по умолчанию:
		
		options = $.extend({
			width:500,
			height:500,
			maxFetch:50,
			captions:false,
			autoAdvance:false,
			advancePeriod:5000
		},options);
		
		// Используем YQL и таблицу flickr.photosets.photos для запроса к Flickr API.
		
		var YQL = 'http://query.yahooapis.com/v1/public/yql?q={QUERY}&format=json&callback=?',
			query = "SELECT * FROM flickr.photosets.photos({MAX}) WHERE photoset_id='{PHOTOSET}'";
		
		// Заменяем ключевое слово "{EXAMPLE}" из строки:
		
		YQL = templateReplace(YQL,{
			"query": encodeURIComponent(
				templateReplace(query,{
					photoset : options.photosetID,
					max	: options.maxFetch
				}
			))
		});
		
		// Шаблон для построения адреса URL изображения с Flickr:
		
		var flickrSRC = 'http://farm{FARM}.static.flickr.com/{SERVER}/{ID}_{SECRET}.jpg',
			flickrSlider = this;
		
		flickrSlider.trigger('jqFlickRemove');
		
		// Вытаскиваем изображение с помощью  Flickr API:
		
		$.getJSON(YQL,function(r){
			if(!r || !r.query || !r.query.count){
				throw "Такого набора нет!";
			}

			var currentPos = 1,
				cnt = r.query.count;

			var caption = $('<span>',{
				className: 'caption'
			}).appendTo(flickrSlider);

			var ul = $('<ul>',{
				css:{
					width: options.width*r.query.count,
					height:options.height
				}
			});
			
			// Цикл по полученному резултату:
			
			$.each(r.query.results.photo,function(){
				data = this;
			
				// Создаем новый элемент LI с фотографией в качестве
				// центрированного фонового изображения:
				
				$('<li>',{
					css : {
						backgroundImage: 'url('+templateReplace(flickrSRC,data)+')',
						width: options.width
					}
				}).appendTo(ul);
			});

			flickrSlider.addClass('flickrSliderHolder')
						.width(options.width)
						.height(options.height+25)
						.append(ul);
			
			// Привязываем пользовательское событие "slide".
			// Можно будет использовать flickrSlider.trigger("slide",2)
			// для перехода ко второму слайду:
			
			flickrSlider.bind('slide',function(e,slide){
				if(slide < 1 || slide > cnt || ul.is(':animated')){
					return false;
				}
				
				ul.animate({
					left:-(slide-1)*options.width
				},{
					easing: 'easeInOutCirc',
					duration: 300
				});
				
				if(options.captions){
					
					// Анимируем переход между 
					// заголовками (если разрешено):
					
					caption.fadeOut(150,function(){
						caption.html(r.query.results.photo[slide-1].title);
					}).fadeIn(150);
				}
				
				currentPos = slide;
			});
			
			var arrows = $('<div>',{
				className: 'arrows'
			});
			
			// Создаем стрелочки "следующий/предыдущий" и 
			// привязываем обработчик для события click:
			
			var arrowPrev = $('<a>',{
				className: 'previous',
				href: '#',
				click : function(){
					var toShow = currentPos - 1;
					if(toShow < 1){
						toShow = cnt;
					}
					
					flickrSlider.trigger('slide',[toShow]);
					return false;
				}
			}).appendTo(arrows);

			var arrowNext = $('<a>',{
				className: 'next',
				href: '#',
				click : function(){
					var toShow = currentPos + 1;
					if(toShow > cnt){
						toShow = 1;
					}
					
					flickrSlider.trigger('slide',[toShow]);
					return false;
				}
			}).appendTo(arrows);
			
			arrows.appendTo(flickrSlider);

			// Выводим первый слайд по умолчанию:
			
			flickrSlider.trigger('slide',[1]);
			
			if(options.autoAdvance){
				
				// Если автопроигрывание включено, дожидаемся события load 
				// и планируем периодическую смену слайдов.
						
				$(window).load(function(){

					$.fn.jqFlick.timeOut = null;
				
					arrowPrev.add(arrowNext).click(function(e,simulated){
						if(!simulated){
							clearTimeout($.fn.jqFlick.timeOut);
						}
					});
				
					(function autoAdvance(){
						if($.fn.jqFlick.timeOut){
							arrowNext.trigger('click',[true]);
						}
						$.fn.jqFlick.timeOut = setTimeout(autoAdvance,options.advancePeriod);		
					})();
				});
			}
		});

		// Обработчик данного пользовательского события удаляет все обработчики событий 
		// и очищает контейнер слайдеров:

		flickrSlider.bind('jqFlickRemove',function(){
			if($.fn.jqFlick.timeOut){
				clearTimeout($.fn.jqFlick.timeOut);
			}
			
			flickrSlider.empty().unbind('jqFlickRemove slide');
			
		});

		return flickrSlider;
		
	};
	
	// вспомогательная функция для замены "{KEYWORD}" на 
	// соответствующее значение объекта:
	
	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
	
	// Пользовательская функция сглаживания перехода
	
	$.easing.easeInOutCirc = function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	};
	
})(jQuery);

$(document).ready(function(){
	
	// Создаем слайдер flickr. 
	// Пример использования плагина.
	
	$('#flickrSlider').jqFlick({
		photosetID: '72157625956932639',
		width:500,
		height:320,
		captions:true,
		autoAdvance:true
	});

	// Cоздаем различные слайдеры flickr
	// в зависимости от значения элемента select.

	$('select').change(function(){
		
		var options = {};
		
		switch(this.value){
			case '1':
				options = {
					photosetID: '72157625956932639',
					width:500,
					height:320,
					captions:true,
					autoAdvance:true
				};
				break;
			case '2':
				options = {
					photosetID:'42296',
					width:500,
					height:500,
					captions:true,
					autoAdvance:true
				};
				break;
			case '3':
				options = {
					photosetID:'72157625961099915',
					width:200,
					height:150
				}
		}

		$('#flickrSlider').jqFlick(options);
	});
	
});