lightboxの使い方

lightboxプラグインにはいくつか種類があってお好きなデザインを選んで入れるのがよいと思います。

ものが違っても導入の仕方は同じですなんですけど、その後の設定が微妙の異なりますので、ここではlightbox2プラグインとPrettyPhotoプラグインについて説明します。

lightboxプラグインにはjQueryを使用しますので、すでに利用している人は改めて導入する必要はないです。

lightbox2の使い方

lightbox2

DL後、lightbox.zipを解凍すると以下のようなファイルが現れます（ここではlightboxというフォルダの中にこれらを入れています）。このjsフォルダの中のjsファイルや、cssフォルダのcssファイルにアクセスして動作させるわけです。

下記ソースをhead内に記述する。lightboxフォルダのcssフォルダのlightbox.cssにアクセスみたいな感じ。 

<!-- HTML -->
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<script src="lightbox/js/jquery-1.7.2.min.js"></script><!-- 他の目的ですでに読み込んでるなら不要 -->
<script src="lightbox/js/lightbox.js"></script>

あとは表示させたい画像を下のようにrel属性をlightboxにして記述する。 

<!-- HTML -->
<a href="sample.jpg" rel="lightbox"><img src=".sample.jpg" width="150" alt="" /></a>

このように新たに作ったフォルダの中のを読み出すとjsファイルのimgの相対パスが狂って×画像とかが表示されないので、lightbox.jsのclose.pngとかの相対パスを変えておきましょう。

PrettyPhotoの使い方

PrettyPhoto

こちらもlightbox2と同様にしてDL後、解凍した後、以下の記述をhead内へ。 

<!-- HTML -->
<script src="lightbox/js/jquery-1.7.2.min.js"></script><!-- 他の目的ですでに読み込んでるなら不要 -->
<link rel="stylesheet" href=prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a.z40[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
});
</script>

最後のscriptが外部ファイルでなくそのまま実行文が記載されていることで少し長くなっています。「z40」はa要素へ適当に当てたクラス名ですのでなんでもいいです。

あとは表示させたい画像を下のようにrel属性をprettyPhotoに、classを自分で指定したクラス名（ここではz40）にして記述する。 

<!-- HTML -->
<a class="z40" title="タイトル" href="sample.jpg" rel="prettyPhoto"><img src="sample.jpg" alt="" width="150" /></a>

実はこのprettyphotoはこの後にもう一操作必要です。それは、画像を開いた後ブラウザの戻るボタンを押しても前のページに戻らない、URLにシャープが付加されるというもの。

このようないつまでも元の画面に戻れない動作を防ぐために、jquery.prettyPhoto.jsを開いて、行の最後のほうの関係する部分をダブルスラッシュでコメントアウトすればOKです。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ