画像拡大時のjsをhighslideからprettyPhotoに
a-blog cms では、画像の拡大で利用するJSはHighslide のものを利用していますが、Lightbox で表示させたい人もいるのではないかと思います。
そんな中で、私としては prettyPhoto がお気に入りだったりします。理由としては、表示時に画面サイズが狭かったら、収まるように表示してくれるところがイイと思ってます。
以下に、その実装方法を書いておきます。
1. ファイルをダウンロードします
prettyPhoto からファイルをダウンロードしてきます。そして、テーマの中の js , css , images にファイルをアップロードします。
2. テーマを修正して js 等を読み込んだりします
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
3. コンフィグの設定を変更します
Entry_Bodyの設定に、イメージビューアーという設定があります。ここに rel="highslide" と書かれていますので、ここを rel="prettyPhoto" にします。これでとりあえず1枚毎ですが、背景が黒っぽくなって表示できるようになります。
複数枚をセットにしてページをおくれるようにする事ができるような機能があります。これを実装する際には、 rel="prettyPhoto[999]" のように書くことで実現できますが、一覧表示時に他のエントリーのものも含んでページ上の全件の写真が出てきてしまいます。
正式版の1.3.0では
rel="prettyPhoto[{unit_eid}]" と少し無理矢理な仕様な気もしますが、1.3.0の正式版でエントリーIDを設定できるようにしておきました。ココでは既に対応済ですので、一覧時もこのエントリー内では3枚になっていると思います。
