jQuery Google画像検索風プラグイン

Google画像検索風プラグイン rc_gallery_open

こういったプラグインは数多の開発者により登場してますが、デザインの兼ね合い等でどうしても希望した動作にならない場合は、ライセンスの緩い物を改変するか、独自で組むかの二択で悩みます。
柔軟性が低いので使い所は限定されてしまいますが、今回は独自に組んだ物に対して更に自分なりに改良を加えた物を公開します。
ダウンロードリンクは下部にあります。

動作環境、jQueryバージョン

jquery-1.6.4
jquery.easing.1.3.js
※バージョンを上げた場合、メソッド名が変更になってたりと若干ソースに手を加える必要が出るかも知れません。
※2013-12-10現行のブラウザーで動作しているのは確認してますが、古いのまでは確認してません。

サンプル画面

動作デモ

・デモ1
コンテンツの横幅に合わせて詳細部分が出現する。
・デモ2
ブラウザの横幅に応じて詳細部分が出現する。

実際に動かしてみたほうが早いですね。早いですよ。

使い方

実際の所コンテンツの横幅に依存してます。デモはスマホでもいける横幅960pxに指定して、contents-0からcontents-4(サンプル画面参照)の横幅の合計が960pxになるように中央に配置してます。
横幅のサイズを超えなければcontentsを何個配置しても問題ありません。
※超えた場合や横幅を指定しない場合回り込みが発生してしまいます。
contents-0からcontents-4の下に対応する詳細部分detail-0からdetail-4(サンプル画面参照)までを配置してます。

・HTMLソース

	

		// 要素にクリックイベントを仕掛けるクラス名に「target」と入れてます。クラス名は必須です。
		
contesnts-0
		
contesnts-1
		
contesnts-2
		
contesnts-3
		
contesnts-4
	


// 回りこみ解除用css


// 対応する詳細用の要素を配置します。上に5個要素をおいたので下にも5個配置してます。
// 詳細部分にイベントを仕掛けるのでクラス名に「gallery_open」と入れてます。クラス名は必須です。

	
detail-0
		// 詳細の中身になります。ここに色々入れます。
		// 下のクリック要素は×ボタンで詳細を閉じたりする場合に設置します。クラス名は必須です。
		
			
		
	
	
detail-1
		
			
		
	
	
detail-2
		
			
		
	
detail-3
		
			
		
	
	
detail-4
		
			
		
	

・scriptソース

$(function() {
    $('.target').rcGalleryOpen({
    	targetClassName : "gallery_open",	// ギャラリーの開く場所のクラス名
    	closeClassName : "gallery_close", 	// 閉じる要素を置いた場合クラス名
    	galleryWidth : "display", 		// ギャラリーの横幅の調整　display : 画面幅 || 指定の横幅

    	// 任意のオプション アニメーション時間を変更する場合
    	triangle : true,			// トライアングルアニメーションの表示(詳細部分の上の三角。消す場合はfalse)
    	animationSlideTime : 500, 		// スライドアニメーション時間
    	animationScrollTime : 300,		// スクロール時間
    	animationSlideCloseTime : 300, 		// ギャラリーが閉じるまでの時間
    	animationTriangleMoveTime : 500, 	// トライアングルの移動時間
    });
});

そんなに難しい事はないとおもいますが、詳細部分の横幅を固定にする場合は下記の様に一部変更します。
指定した数値で詳細部分が出現します。

galleryWidth : 960

ダウンロード

・cochma.net/source/rc_gallery_open

考察

本家googleの画像検索の場合は横にブラウザーの横幅に合わせて画像を並べて、クリックした画像の下に詳細が出現する。
ブラウザーの幅が変わり、画像の並び替えが起こってもクリックした画像の下に詳細が出現する。
今回作成した様なコンテンツ部分と詳細部分が対になってるような作りではなく、コンテンツ部分をひたすら並べてクリック位置に合わせて詳細を表示させてる作りだと思いますが、実装するのはちょっと難しそうです。

他にもjQueryを久しぶりに書いたのだけれども怪しい所がちらほら。。。正直ちょっと無駄なDOM操作が入ってる気がするので何処かのタイミングで調べて記事にでも出来たらと思います。