画像拡大時の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枚になっていると思います。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

a-blog cms 2.10 エントリーのタグ入力画面を元に戻す方法

a-blog cms で A/B テストできる環境を考えてみる その1

a-blog cms の画像ユニットのスタイルとマージンの調整を可能にしてみる

site2014のテーマをマルチブログ化する際に大事なのはテーマの継承とモジュールIDのグローバル化

a-blog cms 2.xのダッシュボード内に管理者用リンク集を設置する

a-blog cms 2.0 の動的フォームを利用するには

最新記事

カテゴリー

アーカイブ

ハッシュタグ