【jQuery】Flickrにアップした画像を使って背景画像をフェードで切り替える

電脳備忘録

背景画像をスライドショーやフェードで切り替えるjQueryプラグイン【jQuery.BgSwitcher】を使ってFlickrにアップした画像の最新6件を背景画像として利用した時のメモ。
PHPでXMLデータを取得して値をセットしてjQueryの構文を出力しています。

<script src="/js/jquery.bgswitcher.js"></script>
<?php
// Flickr APIKEY
define ("APIKEY", "***APIKEY***");
define ("USERID", "***USERID***");
// サムネイルサイズ(s.t.m.z.bよりサイズを設定)
$pictureSize = "b";
// XMLデータ取得用のベースURL
$url = "https://www.flickr.com/services/rest/?"
. "method=flickr.photos.search"
. "&format=rest"
. "&api_key=".APIKEY
. "&user_id=".USERID
. "&per_page=6";
// file_get_contentsの代わりにcURLを使用
// 初期化
$session = curl_init();
// アクセスするURL
curl_setopt($session, CURLOPT_URL, $url);
// ヘッダ文字列の出力
curl_setopt($session, CURLOPT_HEADER, false);
// curl_execの返り値を文字列にする
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// 実行
$url = curl_exec($session);
// 終了
curl_close($session);
// XML文字列をパースしオブジェクトを取得
$xml = simplexml_load_string($url)
or die("XMLパースエラー");
echo '<script>
jQuery(document).ready(function( $ ) {
$("#top").bgSwitcher({  
images: [';
// ループ処理
foreach($xml->photos->photo as $photoValue){
$farmId = $photoValue['farm'];
$serverId = $photoValue['server'];
$owner = $photoValue['owner'];
$ownername = $photoValue['ownername'];
$photoId = $photoValue['id'];
$secret = $photoValue['secret'];
$title = $photoValue['title'];  
echo "'https://farm{$farmId}.staticflickr.com/{$serverId}/{$photoId}_{$secret}_{$pictureSize}.jpg'";
echo ",";
}
echo "],
interval: 6000, 
});  
});
</script>\n";  
?>
Newer
Older
Dark
Light
menu