PC,Adroid,自転車,津軽三味線などについてのブログです

2011年9月29日木曜日

ブログ改造:Slimbox2で写真を表示させる

赤は追記です
 改造を終えて、記事も書き終えた後、写真の表示方法をblogger標準に戻してしまいました。理由は、写真が表示されるまでの時間が長くなった為です。
お払い箱になった改造ですが、やりたい方もいると思うので参考に残しておきます。
もっとも、私はほとんど全部、他の方の知恵を借りただけなんですが。

今回のブログ改造は、記事の中にある写真をクリックした時の動作の改造です。

bloggerの場合、記事の中の写真をクリックすると同じ窓(タブ)に写真が表示されます。
これfだと間違ってタブを消してしまうと元の記事に戻れなくなる公算が大です。そこで、写真の下に「戻る」ボタンがあればわかりやすいかと。

ブログに詳しい人に言わせると、Lightboxスタイルの表示方法でいいのかな・・
つまり・・・

1:記事内の写真をクリックすると同じ窓に写真が表示されるが、
2:記事に戻るときは写真の下にある「戻る」ボタンをおすようにする


要するに、こんな感じにしたかったのです。下の写真をクリックすると、右下に
"Close"と出るので、それをクリックすると記事に戻ってきますし、写真の外側の暗い部分をクリックしても戻ってきます。(既にできなくしてあります!

早速、いろいろ調べてると、Slimbox2というものを使えばできることがわかりました。

このブログには既に、Slimbox2を導入済みなので、上の写真をクリックすると Closeが表示されたわけです。インストールが終わると基本的には既存の記事中の写真にもSlimbox2は機能するようです。過去記事に対しては完全とはいいがたいらしいですが、そこまではまだよくわかりません。

さて、方法です。bloggerにどうやればいのか?さがしてみると、いいサイトを見つけました。(ここです) 記事に従って改造した所すんなりと目的が達成されました。slimbox2の作者さん、紹介してくれた作者さん(名前わかりませんでした)ありがとうございます。

簡単にまとめると

1:jQueryをblogger上で使用可能にしておく
2:Slimbox2をbloggerに設定する
3:目安として横1024ドット以上の大きな写真ファイルは1024以下のものに差し替える
(この理由は次に述べます)

の2(または3)段階となります。詳しくは下のサイトを御覧ください。

       BloggerにLightbox風エフェクトを導入して幸せになる・簡単導入編 


さて、上のサイトでも触れられてますが、Smilebox2には1つ困った点があります。
巨大な写真がアップされてる場合、Closeボタンが画面からはみ出し、スクロールバーを操作しても現れない点です。記事に戻るには、Ctlr-Cをおすしかありません。言われなければわからないかも・・・私は言われるまでわかりませんでした。

それで対策。
1:写真ファイルの表示の大きさをウインドーに自動的にあわせる(お・・スマート)
2:十分ちいさな写真ファイルに差し替える(う・・原始的)

今回は 1:を実現する技術がないので、2:にしました・・・ぐあああ

私はこれから小さなサイズにファイルを差し替える作業を始めます。・・では、ごきげんよう

追記:ファイルの差し替え作業を手動で終えました。でも、写真の表示方式を標準にもどしたのでファイルの差し替えは無駄に終わりました。まあ、勉強‥実験にはつきものです。


0 件のコメント:

コメントを投稿