2006年07月24日

Flickr TAG で lightbox.js を使ってみる このエントリーをはてなブックマークに追加

こんにちは、あきれたぼういずの益田喜頓です(嘘です ってオレ何歳だ?)

テキトーに作ってみた Flickr Tag たが、更に調子に乗って Lightbox JS にも対応してみた。(って使っている人いるのか?)
写真のサムネールをクリックすると、読み込みを開始して、Lightbox JSのエフェクトで表示される。
Flickr にアップロードされている画像は高品質で画像サイズのかなり大きいものが多いので実画像の読み込みにかなり時間がかかるのだが、まあ、お遊びとして作ってみたのだ。

貼り付け先のBlogで Lightbox JS を導入済みの人は、lightbox.js対応版で表示されるTAGの1行目はインポートしなくてもよいかもしれない(未確認)。

下記は「nature」(自然)というタグで抽出したもの(実画像がかなり重いのでご注意を)。



posted by りょーち | Comment(7) | TrackBack(0) | Web周辺技術
この記事へのコメント
なんだかよくわかんないけどInternet ExplorerではScriptの読み込みに失敗する。(うーむ、何故?)
Posted by りょーち at 2006年07月24日 10:52
りょーちさんこんにちは

Flickr api 関連でお聞きしたいのですが

http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/
を見てサムネイルで画像を表示するところまでは出来ました。

りょーちさんの
Flickr TAG で lightbox.js を使ってみるのように
私も
http://orangoo.com/labs/GreyBox/
を使用して同様の効果をサイト上で演出したいと思っております。

http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/
ではリンク先は写真が掲載しているページになりますが、
りょーちさんのように写真を表示したいのです。

// a 要素の生成
var atag = document.createElement( 'a' );
atag.href = 'http://www.flickr.com/photos/'+
photo.owner+'/'+photo.id+'/';

この a 要素の生成のソースを変更すればいいのかと思いましたが
うまくできませんでした。

・写真のアドレスを取得

・rel="gb_page_fs[]" を生成される a 要素に含める

この2点について

お忙しいと思いますが、ご教示いただければと思います。

Posted by utube at 2007年06月18日 15:07
こんにちは。りょーち@管理人です。
うーむ、実はりょーちもよくわかっていません。更に1年以上前に作ったものなので、どーやって動いているのかも実は怪しいくらいの感じです・・・orz

lightboxについてはrel属性にlightboxを指定して、あとは、lightbox.jsに任せていると思います。
appendChild relで検索してみるとよいかもしれません。
Posted by りょーち at 2007年06月18日 15:22
すばやい回答ありがとうございます。

調べてもうちょっとやってみます!
Posted by utube at 2007年06月18日 15:54
りょーちさん はじめまして。

Flickr TagはFlickrのアカウントを持っていなくても
使わせていただいてもいいのでしょうか?

lightboxは前に使ってみたことがあったので
検索でりょーちさんのFlickr Tagを見つけたときは感動しました

初歩的な質問ですみません。
よろしくお願いします。
Posted by ゆう at 2007年08月29日 22:19
ゆうさんこんにちは。りょーち@管理人です。
>Flickr TagはFlickrのアカウントを持っていなくても
>使わせていただいてもいいのでしょうか?

よいと思われます。
かなり昔に作ったものなので、動きがあやしいかもしれませんが、適度にお使いください。

ではでは。
Posted by りょーち at 2007年08月30日 05:57
りょーちさん おはようございます。
さっそく使わせていただきますね。

ありがとうございます!


Posted by ゆう at 2007年08月30日 08:33
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。