fc2ブログ

自動的にLightboxで表示する

Lightboxを使うで書いたようにfrestyleではLightboxに標準で対応してますが、記事を書くたびにいちいちコードを追加しなければならないのでめんどくさくてめんどくさくて・・・。


ってことでそんなめんどくさい作業しないでも自動的にLightboxで表示してくれるようにするプログラム作りました。


使い方は、HTMLの該当箇所を1箇所修正するだけです。

<script type="text/javascript" src="http://blog-imgs-44.fc2.com/y/k/u/ykuu/lightbox.js"></script>

HTMLの19行目あたりにある↑のコードを


<script type="text/javascript" src="http://blog-imgs-44.fc2.com/y/k/u/ykuu/lightbox2_frestyle.js"></script>

↑このコードにするだけです。


あと、Lightboxで表示したくない画像がある場合には、その画像のリンクにrel="none"を追加してやればいいです。

スポンサーサイト



修正および要望への対応版アップ

細かい表示の修正および要望への対応版をアップしました。
気になる方はお手数ですが一度テンプレートを削除して再度ダウンロードしてください。

主な修正・追加点は以下のとおりです。

テンプレートのご規約的なもの

あんまり規則好きじゃないんだけど、ないとめんどくさいことになりそうなので。

利用可能なブログ

アダルト以外ならOK(アダルトでも同人とかの創作メインならOK)。商用でもOK。

改変について

ご自由にどうぞ♪ カレンダーとかを他のテンプレへ移植したりする場合はリンクくれると有りがたいです。強制じゃあないよ!

再配布について

テンプレごとに個別に決めてます。ただし、改変加えたものだけでお願い。

テンプレート名再配布
frestyle

※○は再配布OK
△は許可制でメールでもスカイプでもコメントでも手段問わず連絡お願い
×は再配布だめよ

不具合修正1 (frestyle)

公開されて間もないですが、たくさんのダウンロードとコメントありがとー。
早速で悪いんだけど、コメントくれた方々のブログを拝見してたら、
1ヶ所不具合見つけたので修正しておきました。(2010-05-11 01:42頃修正適用)

具体的には、トラックバックを受け付けない設定にしていると、
(COMMENT) (TRACKBACK)って並んでるところの (COMMENT) が下にある点線にかぶさる不具合です。

お手数ですがトラックバック受け付けない設定にしたりする人は一度削除してダウンロードし直してください。
それ以外の方はそのままお使いいただいてても問題ないと思いますー。

Lightboxを使う(frestyle)

frestyleは標準でLightboxに対応しているので、

空
↑クリックしてみてください。

こんな感じに小さい画像クリックで大きい画像をその場で表示するみたいなことが出来ます。
使い方は、画像を貼ると出てくるタグ
<a href="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720.jpg" target="_blank"><img src="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720s.jpg" alt="空" border="0" width="120" height="299" /></a>
みたいなのを
<a href="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720.jpg" target="_blank" rel="lightbox"><img src="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720s.jpg" alt="空" border="0" width="120" height="299" /></a>
のようにaタグにrel="lightbox"を追加してやることで実現できます。
あと補足で、画像をグループ化というか「NEXT」をクリックすると次の画像へ、「PREV」をクリックすると前の画像へ・・・みたいなことがやりたい場合には、
<a href="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720.jpg" target="_blank" rel="lightbox[グループ名を半角英数で]"><img src="http://blog-imgs-44.fc2.com/y/k/u/ykuu/kuu720s.jpg" alt="空" border="0" width="120" height="299" /></a>
のようにしてやると出来ます。

追記(2010-05-18):「こんなコード追加するのめんど~い」っていう人のために、普通に記事書いたら自動的にLightboxで表示してくれるプログラム書きました。
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
08 10
Profile

yuu

Author:yuu

名古屋工業大学三年生・男。
無類の猫好き。休日は家でゴロゴロしてる。

Skype ID: cradle-y
E-Mail: quukuu(あっとまーく)gmail.com

» テンプレートの利用規約的なもの

Recent Entries
RSS
Recent Comments
Categories
Archives
Counter