Skip to content

Instantly share code, notes, and snippets.

@nenjiru

nenjiru/example.html

Created October 15, 2010 13:55
Show Gist options
  • Save nenjiru/628217 to your computer and use it in GitHub Desktop.
Save nenjiru/628217 to your computer and use it in GitHub Desktop.
Download ZIP
Flickrのフォトセットを自動再生 jQuery Plugin
Raw
example.html
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jquery.getphotos.js</title>
<style type="text/css">
* {
border: none;
list-style: none;
}
#Index {
position: absolute;
top: 50px;
left: 20px;
}
#FadeIn {
position: absolute;
top: 50px;
left: 120px;
}
#SlideDown {
position: absolute;
top: 50px;
left: 220px;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="jquery.getphotos.js"></script>
<script type="text/javascript">$(function(){
var API_KEY = "set api key";
var PHOTOSET = "photoset id";
var flickr = new $.getPhotos.Flickr(API_KEY, PHOTOSET);
var effect = new $.getPhotos.Effect("fadeIn");
$("#FadeIn").getPhotos(flickr, effect);
flickr.size = $.getPhotos.SIZE[2];
effect.type = "slideDown";
$("#SlideDown").getPhotos(flickr, effect);
$("#Index")
.getPhotos({
api_key: API_KEY,
photoset_id: PHOTOSET,
size: "url_sq"
})
.bind($.getPhotos.REQUEST_ERROR, function(error, message) {
console.log(error, message)
})
.bind($.getPhotos.APPENDED, function(event, photos) {
console.log(event, photos)
})
.bind($.getPhotos.COMPLETE, function(event, photos) {
console.log(event, photos)
});
});</script>
</head>
<body>
<div id="Index"></div>
<div id="FadeIn"></div>
<div id="SlideDown"></div>
</body>
</html>
Raw
jquery.getphotos.js
////////////////////////////////////////////////////////////////////////////////
// Flickr photoset slideshow - jQuery Plugin
// Flickrのフォトセット取得と自動再生
//
// Copyright 2010, Minoru Nakanow
// Licensed under the MIT licenses.
// http://www.opensource.org/licenses/mit-license.html
//
// Usage:
// var flickr = new $.getPhotos.Flickr(API_KEY, PHOTOSET);
// var effect = new $.getPhotos.Effect("fadeIn");
// $(selector).getPhotos(flickr, effect);
//
////////////////////////////////////////////////////////////////////////////////
(function($) {
//--------------------------------------------------------------------------
// Variables
//--------------------------------------------------------------------------
//--------------------------------------------------------------------------
// jQuery extend
//--------------------------------------------------------------------------
jQuery.fn.extend({
/**
* Flickrフォトセット再生
*
* @param {Object} flickr Flickrオブジェクト
* @param {Object} effect スライドショーパラメータ
* @param {Boolean} error falseでエラーメッセージを挿入しない
* @return {jQuery}
*/
getPhotos: function(flickr, effect, error) {
if (effect) _defaultEffect(this, $.extend({}, effect));
if (error || error == undefined) _defaultError(this);
_request($.extend({}, flickr), this);
return this;
}
});
jQuery.extend({
/**
* フォトセット再生パラメーター
*/
getPhotos: {
/**
* Flickrオブジェクトを作成
*
* @param {String} api_key APIキー
* @param {String} photoset_id フォトセットID
* @property {String} size フォトサイズ
*/
Flickr: function(api_key, photoset_id) {
this.api_key = api_key;
this.photoset_id = photoset_id;
this.size = $.getPhotos.SIZE[0];
},
/**
* スライドショーオブジェクトを作成
*
* @param {String} type タイプ（"fadeIn"|"slideDown"）
* @param {Number} speed 遷移時間（初期値:1000）
* @param {Number} delay 待機時間（初期値:6000）
*/
Effect: function(type, speed, delay) {
this.type = type;
this.speed = speed || 1000;
this.delay = delay || 6000;
},
/**
* 写真サイズ
*
* 0: Square 75x75
* 1: Thumbnail 100x75
* 2: Small 240x180
* 3: Medium 500x375
* 4: Large 1024x768
*/
SIZE: ["url_sq", "url_t", "url_s", "url_m", "url_l"],
/**
* すべての写真のロードが完了
*
* @eventType $.getPhotos.COMPLETE
*/
COMPLETE: "photo_complete",
/**
* 写真をHTMLに追加
*
* @eventType $.getPhotos.APPENDED
*/
APPENDED: "photo_appended",
/**
* データ取得失敗
*
* @eventType $.getPhotos.REQUEST_ERROR
*/
REQUEST_ERROR: "request_error"
}
});
//--------------------------------------------------------------------------
// Private methods
//--------------------------------------------------------------------------
/**
* エフェクトの設定
*/
function _defaultEffect(target, effect) {
if (!effect.speed || !effect.delay) {
effect = new $.getPhotos.Effect(effect.type, effect.speed, effect.delay);
}
if(effect.type == "fadeIn" || effect.type == "slideDown") {
target.bind($.getPhotos.APPENDED, function(event, photos) {
_slideshowPreset(photos)
});
target.bind($.getPhotos.COMPLETE, function(event, photos) {
_slideshowEngine(effect, photos)
});
}
};
/**
* エラーの設定
*/
function _defaultError(target) {
target.bind($.getPhotos.REQUEST_ERROR, function(error, message) {
$(this).html(message)
});
};
/**
* リクエスト開始
*/
function _request(param, target) {
var url = "http://www.flickr.com/services/rest/?jsoncallback=?";
var query = {
format: "json",
method: "flickr.photosets.getPhotos",
api_key: param.api_key,
photoset_id: param.photoset_id,
extras: "path_alias, "+ param.size
}
$.getJSON(url, query, function(data){
_callback(data, target, param.size)
});
};
/**
* エラーメッセージ配信
*/
function _errorCast(target, message) {
target.trigger(new $.Event($.getPhotos.REQUEST_ERROR), message);
};
/**
* APIからの結果をHTMLに変換、イベントの配信
* HTMLに追加直後⇒ $.getPhotos.APPENDED
* 全画像のロード完了⇒ $.getPhotos.COMPLETE
* リスナーの第二引数に画像リストを渡す
*/
function _callback(data, target, size) {
if (!data || data.stat == "fail") {
_errorCast(target, data.message || "No Photos");
return;
};
var p, l, u, a, s, g, v;
var f = (data.photos) ? data.photos.photo : data.photoset.photo;
var n = f.length;
var c = $(document.createElement("ul"));
for( var i=0; i<f.length; i++ ) {
p = f[i];
l = $(document.createElement("li"));
u = "http://www.flickr.com/photos/"+ p.pathalias +"/"+ p.id +"/";
a = $(document.createElement("a")).attr({"href": u, "target": "_blank"});
s = p[size]+"?"+new Date().getTime();
g = $(document.createElement("img")).attr("src", s).one("load", function(e) {
if (this.width > this.height) v = "horizontal";
else if (this.width < this.height) v = "vertical";
else v = "square";
$(this).parent().parent().addClass(v);
if (--n == 0) target.append(c).trigger(new $.Event($.getPhotos.COMPLETE), c.get(0));
});
a.append(g);
l.append(a);
c.append(l);
};
target.append(c).trigger(new $.Event($.getPhotos.APPENDED), c.get(0));
};
/**
* スライドショー準備
*/
_slideshowPreset = function(list) {
var c = $(list);
var f = c.find("li");
if (f.length == 1) return;
c.css("position", "relative");
f.css("position", "absolute").hide();
};
/**
* スライドショー開始
*/
_slideshowEngine = function(config, list) {
var t = config.type;
var s = config.speed;
var d = config.delay;
var c = $(list);
var f = c.find("li");
var n = f.length - 1;
var i = 0;
if (!n) return;
f.eq(0)[t](s);
setInterval(function() {
if (++i > n) i = 0;
f.eq(i)[t](s, function() {
$(this).prev().hide().appendTo(c)
});
}, d);
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment