当サイトをアクセスした際に、２回中１回は背景に写真がスライドしていくと思いますが、『Supersized』というjQueryライブラリを利用させて貰っています。
そして写真データはFrickrへアップしたものを読み込んでいます。
ただ、Frickrデータを扱う際の設定方法など、日本語ドキュメントが全く見当たらなかったので、僕が設定した方法をココに残しておこうと思います。
また、Frickrデータを使用する際、Supersized DEMOのようなインターフェイスが扱えないようです。
※これについては、あまり詳しく調査しておりませんので気になる方はお調べ下さい。
[手順]
１．Flickrアカウント作成
２．API利用登録 ※他サイト様を参考に登録してください。（商用と非商用があります。）
３．Flickrサイトにて写真をアップロード
４．アルバムを作成し、作成したアルバムを開く
５．URLから２つメモを取る。https://www.flickr.com/photos/*メモ１*/sets/*メモ２*/
６．下記URLのAPIキーとメモ２を置き換えてアクセスし、冒頭で jsonFlickrApi({“stat”:”fail“,*** と、１行のみの表示の場合は何かが間違っています。
※この行程はAPIキーやメモが間違えていないか確認するだけです。
https://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=APIキー&photoset_id=メモ２&per_page=100&sort=date-posted-desc&format=json&jsoncallback=?
７．『Supersized』からライブラリをDownload
８．解凍した flickr フォルダの /css/, /js/, /img/ をFTPにて任意の場所へアップロード ※他のフォルダデータは必要ありません。
９．HTMLのhead内に以下のコードを記述
<script type="text/javascript" src="js/supersized.flickr.1.1.2.js"></script>
↓メモ１、メモ２、APIキーを書き換えること。
jQuery(function($){
$.supersized({
//Functionality
random : 1, //ランダム表示 0:off, 1:on
slide_interval : 8000, //スライド開始するまでの時間（1000ミリ秒=1秒）
transition : 1, //スライド時のエフェクト 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 750, //エフェクトの時間（1000ミリ秒=1秒）
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //右クリック禁止 Disables image dragging and right click with Javascript
//Flickr
source : 1, //1-Set, 2-User, 3-Group, 4-Tags
set : 'メモ２', //Flickr set ID (found in URL)
user : 'メモ１', //Flickr user ID (http://idgettr.com/)
total_slides : 100, //How many pictures to pull (Between 1-500)
image_size : 'b', //Flickr Image Size - t,s,m,z,b (Details: http://www.flickr.com/services/api/misc.urls.html)
api_key : 'APIキー' //Flickr API Key
});
});
※上記コードは最低あれば良いだろうなというコードになっています。また、操作コントロールパネルは『Supersized』を解凍したフォルダに入っている flickr.html を参考にしてください。オプションの指定もこちらのHTMLにすべて書かれています。