写真共有サイトの写真をページ上に貼り付ける

国内でフォト蔵という写真を共有できるサイトがあったじゃないか！と思い出し、ちょっと試してみることに。

運営がunohなんで、技術的には安心だし。見てみると1万枚までアップ可能との事。1万枚って…。無限に容量が増える事を売りにしている写真共有サイトもあるけど、1万枚という数を考えると無限である必要がないと感じる。使い切れないもの。

さて、早速アカウントを作り、実際に使ってみた。

写真のアップはサイト上、ケータイ、専用ソフトからできる。
公開条件は「全員」か「友達まで」か。
アップロードされた画像は

• 極小 (120x90)
• 小 (240x180)
• 中 (450x337)
• 大 (800x600)
• 特大 (1024x768)
• 元画像 (3072x2304)

と、6段階に自動的に画像が作成されるらしい。flickerより１つ多いかな。サイト上に貼り付けたいだけなので、小と大があれば事足りるのだけど…。

だいたい他の共有写真サービスと同じかな。アップ専用ソフトも使ってみたけど、アップ時にちょっと重さを感じる。このあたりは仕方ないのかな。

写真をクリックするといちいちサイトに飛ぶのが嫌。な件だけど、これはフォト蔵も同じ。どこのサイトでもきっと同じだろうな、と思ったのでアドレスだけ参照してサイトに貼り付ける事にした。
OperaやFirefoxならば写真の上で右クリックすると、「画像のアドレスをコピー」と出るのでさくっとソースに貼り付けられる。非常に便利。

あとは写真の見せ方だけど、Lightboxの見せ方はとても気に入っていたので、似た動きのできるjQueryプラグインを探した結果、thickboxを採用する事に。
ほとんどLightboxと同じ見せ方と使い方まで同じようにできる。LightboxのjQuery版と言ってもいいだろう。
拡大表示したいサムネイル写真に拡大写真のアドレスを貼り、aタグのclassをthickboxとすればもう完成。

フォト蔵とthickboxのコンボでこんな感じに↓
※Firefoxで見てください。

ちなみに、ただ画像のアドレスを貼り付けただけでは、アドレスに拡張子がないため「画像である」という判定ができないので、別ウィンドウで写真が立ち上がってしまうけど、thickboxの「iframe」で表示する機能を使えばこの通り、拡張子がないアドレスでも遷移なしで表示可能。しかもなぜか拡大機能が付いてる…。こんな機能付いてたかな…。まぁあって邪魔な機能ではないので良しとします。

が！ここで大問題。Firefox以外ではろくに見れません…。
やっぱり拡張子付いてないとだめっぽい。
thickboxのiframe用の設定のせいで、うまくアクセスできないようです。これは失敗したなぁ…。

で、よくよくflickerを見てみると、サイズ違いの写真でもちゃんと拡張子が付いているじゃないですか！
冒頭でいきなり切ったflickerをよもや使う事になるとは…。
というわけでこっちがflickerとのコンボ↓

これならOperaでもちゃんと出るかな。
ただ、IEだけCSSの関係で画面の上のほうに出ちゃう。
これはCSS調整しないとだけど、このCSSちょっとおかしいのでどうしたものか…
thickboxのデモページではきっちり出ているのになぜなんだろう
しかし、flickerだと大きいサイズの写真が横800程度のものがないのが困る。英語だし。
拡張子の出る写真共有サイト探さないと…。

参照リンク

• ThickBox 3.1
• 写真共有サイト「フォト蔵」
• flicker