2011.05.28 Saturday
「lightbox使用法」

jugemにはlightbox用のスプリクトが用意されています。
lightboxとは画像をクリックした時画面が半透明になって画像が表示されるアレです。
サンプルは下。

いちいち戻るとかしなくてもいいしスライド形式にもできるのですごく便利です。

<HEAD>〜<HEAD>内に
<script type="text/javascript" src="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script>
<link rel="stylesheet" href="http://js.jugem.jp/Lightbox/2.04/css/lightbox.css" type="text/css" media="screen" />
を埋め込んでください。
このサイトで配布しているテンプレートにはあらかじめこのhtmlを埋め込んであります。
便利だからです。

このままでは動きません。
リンクする際の<A hraf="URL">にうめこまないとできません。
ちょっと面倒ですがブログの記事編集ページでHTMLモードにしましょう。
そして【rel="lightbox"】を先ほどのタグに埋め込みます。
サンプルは<A hraf="URL" title="画像のタイトル" rel="lightbox">ここに文字や画像タグ</A<です。
画像のタイトルはなくてもかまいません。
のせた場合画像の下のほうに表示されます。
因みに画像表示のタグ<IMG src="画像のURL">内に埋め込んだら動きませんので注意。
簡単なやり方としては最初の編集モードで編集してからHTMLモードにしてrel="lightbox"を埋め込むのが簡単かと思います。

因みにこのrel="lightbox"だけだとスライド形式にはなりません。
rel="lightbox[a]"と記述するとスライド形式になります。
たとえば記事にいくつか画像がある場合、
<A hraf="URL1" rel="lightbox[a]"><IMG src="画像のURL1">
<A hraf="URL2" rel="lightbox[a]"><IMG src="画像のURL2">
<A hraf="URL3" rel="lightbox[a]"><IMG src="画像のURL3">
という感じで表示するとその[a]と書いているものだけグループになってスライドされます。
他にも[b]というのがあれば[b]のグループでスライドされるとか…。
ちょっと説明がややこしいですが…。
たとえばイラストなど版権/オリジナルなどで分けたい場合、
版権を[a]オリジナルを[b]とすると版権だけ、オリジナルだけスライドできます。
おすすめは記事別に[]の文字を変える事です。
基本的にアルファベットか数字なら大丈夫なはずです。
自分は記事別にしていてわかりやすいようにa,b,c…などアルファベットで分けています。
投稿する日別でもいですね。
こうするとその記事だけスライドできます。
まとめてひとつにすると今ブログでrel="lightbox"のタグが付いてるものすべてが表示されます。

サイドバーにイラスト/写真のリンクを貼りたいときでも使用可能です。
これも文字内を別にしとくと便利かと思います。

やたらややこしい説明ですがわからなければ検索してみるとよろしいかと思います。
何か質問がございましたらコメントなどにご記入ください。
≫lightboxについて | 20:11 | template | comments(0)

Comment










<< solash | main | テンプレート修正 >>
Jugem Templates

Etc

Archives


みんなのブログポータル JUGEM