今回は、よく見かける画像表示を簡単におしゃれに見せれるpluginであるlightboxをご紹介。
lightboxはもともと、prototype.jsという違うjavscriptlibraryで作られていたのですが、Lokesh Dhakarによってjqueryの軽量版ができているみたいです。感謝感謝→jquery lightboxのサイト
Get the new versionをクリックしてダウンロードします。
必要になるのがjsとcssとimagesのフォルダです。
まずはサーバーにjsとcssとiamgesをあげ、下記のタグを拡大表示させたいページの部分に付け加えていきます。
jqueryの部分
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.4');</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
※jquery.lightbox-0.5.jsのリンク場所はアップした場所によって違います。
$('#gallery a').lightBox();
#galleryで囲まれ、aタグでリンクしている画像を拡大表示してくれます。
セレクターを書き換えることでいろいろな範囲でできるように指定できます。
cssの部分
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
※cssもリンク場所はアップした場所によって違います。
html
<div id="#gallery"> <a href="photos/image1.jpg" title="拡大表示の時に表示させたい画像の説明文" > <img src="photos/thumb_image1.jpg"/></a> <a href="photos/image2.jpg" title="拡大表示の時に表示させたい画像の説明文" > <img src="photos/thumb_image2.jpg"/></a> … </div>
1、画像の設置場所はどこでも大丈夫です。
2、#galleryで囲まれ、aタグでリンクしている画像に対して適用されるので、名前もどんな名前でも大丈夫です。
3、aタグのtitle属性に説明文を入れることで拡大表示時に説明文を表示させることができます。
動的なサイトで使う場合
WordPressなどのURLの固定されていないサイトで使う場合
jquery.lightbox-0.5.jsの拡大画像を表示時のイメージ画像を絶対パスで書き換えてあげる必要があります。
…省略… imageLoading:'/images/lightbox-ico-loading.gif', imageBtnPrev:'/images/lightbox-btn-prev.gif', imageBtnNext:'/images/lightbox-btn-next.gif', imageBtnClose:'/images/lightbox-btn-close.gif', imageBlank:'/images/lightbox-blank.gif', …省略…
※リンク場所は、imagesファイルのアップした場所によって違います。