当サイトをアクセスした際に、2回中1回は背景に写真がスライドしていくと思いますが、『Supersized』というjQueryライブラリを利用させて貰っています。
そして写真データはFrickrへアップしたものを読み込んでいます。
ただ、Frickrデータを扱う際の設定方法など、日本語ドキュメントが全く見当たらなかったので、僕が設定した方法をココに残しておこうと思います。
また、Frickrデータを使用する際、Supersized DEMOのようなインターフェイスが扱えないようです。
※これについては、あまり詳しく調査しておりませんので気になる方はお調べ下さい。
[手順]
1.Flickrアカウント作成
2.API利用登録 ※他サイト様を参考に登録してください。(商用と非商用があります。)
3.Flickrサイトにて写真をアップロード
4.アルバムを作成し、作成したアルバムを開く
5.URLから2つメモを取る。https://www.flickr.com/photos/*メモ1*/sets/*メモ2*/
6.下記URLのAPIキーとメモ2を置き換えてアクセスし、冒頭で jsonFlickrApi({“stat”:”fail“,*** と、1行のみの表示の場合は何かが間違っています。
※この行程はAPIキーやメモが間違えていないか確認するだけです。
https://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=APIキー&photoset_id=メモ2&per_page=100&sort=date-posted-desc&format=json&jsoncallback=?
7.『Supersized』からライブラリをDownload
8.解凍した flickr フォルダの /css/, /js/, /img/ をFTPにて任意の場所へアップロード ※他のフォルダデータは必要ありません。
9.HTMLのhead内に以下のコードを記述
<script type="text/javascript" src="js/supersized.flickr.1.1.2.js"></script>
↓メモ1、メモ2、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 : 'メモ2', //Flickr set ID (found in URL) user : 'メモ1', //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にすべて書かれています。