写真を散りばめたような動的な演出をする「Photopile JS」の使い方

写真を散りばめたような動的な演出をする「Photopile JS」の使い方

Photopile JSは、写真を動的に演出するjQueryプラグインでして、Photopile JSを使うだけで一つのコンテンツを作成することが出来ます。
画像の動的演出と言えば、カルーセルやマウスオーバーオンオフの切り替え表示が多いので、この手の動的な演出はあまり見ることがないタイプです。

演出の内容は、写真をバラバラにして置いたところマウスでバラバラになった写真を拾うような内容です。
クリックすると写真がアップされ、写真をクリックしたまま動かせば写真が動くというような、そんな感じです。

あまり深く突っ込まなくてもいいところですが、今回はjQueryだけでなく、jQuery UIが使われています。
jQuery UIをご存じないようでしたら、お調べ頂くと面白いかもしれません。

それではすすめていきたいと思います。

以下が本家サイトとGitHubです。
諸々のファイルはGitHubeでダウンロードして頂けます。

• Photopile JS
• Photopile JSのGitHub

phptemp_pp_160808.zip

サンプルです。

• 組み込み済みサンプル

サンプルに組み込んでいるたくさんの写真は、本家のダウンロードしたファイルに同梱されている画像を使いましたので、画像ファイルは適宜ご用意ください。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

今回、特定場所にコンテンツを埋め込むだけですので、全ページ共通のような組み込みはしていません。
ルートページのみ対応していますので、他のコンテンツページに設置する場合は適宜、修正をお願い致します。

コンテンツとコンテンツの間に設置する場合の上下のスペースは、「#top_photo」の「padding-top」と「padding-bottom」で調整しています。

Gitubからダウンロードしてきたフォルダから「/css/photopile.css」と「/js/photopile.js」を適宜必要フォルダに移動してください。
そして、Photopileを表示させたいページのヘッダでCSSのみを読み込ませてください。
JSファイルはコンテンツの箇所で読み込ませます。

<link href="/css/photopile.css" type="text/css" rel="stylesheet" />

そして、以下の画像を表示させる部分をコンテンツ中に記載してください。

<div id="top_photo">
<div class="photopile-wrapper">
<ul class="photopile">
<li><a href="images/fullsize/01.jpg"><img src="images/thumbs/01.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" /></a></li>
<li><a href="images/fullsize/02.jpg"><img src="images/thumbs/02.jpg" alt="Building Atlanta, Georgia" width="133" height="100" /></a></li>
<li><a href="images/fullsize/03.jpg"><img src="images/thumbs/03.jpg" alt="Nice day for a swim" width="133" height="100" /></a></li>
<li><a href="images/fullsize/04.jpg"><img src="images/thumbs/04.jpg" alt="The plants that never die" width="100" height="133" /></a></li>
<li><a href="images/fullsize/05.jpg"><img src="images/thumbs/05.jpg" alt="Downtown Atlanta, Georgia" width="100" height="134" /></a></li>
<li><a href="images/fullsize/06.jpg"><img src="images/thumbs/06.jpg" alt="Atlanta traffic" width="100" height="137" /></a></li>
<li><a href="images/fullsize/07.jpg"><img src="images/thumbs/07.jpg" alt="A pathetic dog" width="120" height="120" /></a></li>
<li><a href="images/fullsize/08.jpg"><img src="images/thumbs/08.jpg" alt="Two happy dogs" width="140" height="100" /></a></li>
<li><a href="images/fullsize/09.jpg"><img src="images/thumbs/09.jpg" alt="Antigua, Guatemala" width="100" height="133" /></a></li>
<li><a href="images/fullsize/10.jpg"><img src="images/thumbs/10.jpg" alt="Iximche, Guatemala" width="135" height="128" /></a></li>
<li><a href="images/fullsize/11.jpg"><img src="images/thumbs/11.jpg" alt="The bat cave" width="119" height="133" /></a></li>
<li><a href="images/fullsize/12.jpg"><img src="images/thumbs/12.jpg" alt="All Saints Day Kite Festival" width="133" height="100" /></a></li>
<li><a href="images/fullsize/13.jpg"><img src="images/thumbs/13.jpg" alt="Tikal, Guatemala" width="130" height="130" /></a></li>
<li><a href="images/fullsize/14.jpg"><img src="images/thumbs/14.jpg" alt="Mackinac Island, Michigan" width="111" height="130" /></a></li>
<li><a href="images/fullsize/15.jpg"><img src="images/thumbs/15.jpg" alt="Summer flowers" width="133" height="100" /></a></li>
<li><a href="images/fullsize/16.jpg"><img src="images/thumbs/16.jpg" alt="Full of hot air" width="133" height="100" /></a></li>
<li><a href="images/fullsize/17.jpg"><img src="images/thumbs/17.jpg" alt="On the rise" width="133" height="100" /></a></li>
<li><a href="images/fullsize/18.jpg"><img src="images/thumbs/18.jpg" alt="Amador Causeway, Panama City" width="133" height="100" /></a></li>
<li><a href="images/fullsize/19.jpg"><img src="images/thumbs/19.jpg" alt="The Panama Canal" width="140" height="79" /></a></li>
<li><a href="images/fullsize/20.jpg"><img src="images/thumbs/20.jpg" alt="Flags over Brussels" width="133" height="99" /></a></li>
<li><a href="images/fullsize/21.jpg"><img src="images/thumbs/21.jpg" alt="Eiffel Tower" width="100" height="134" /></a></li>
<li><a href="images/fullsize/22.jpg"><img src="images/thumbs/22.jpg" alt="Never-ending stairs" width="99" height="133" /></a></li>
<li><a href="images/fullsize/23.jpg"><img src="images/thumbs/23.jpg" alt="Paris, France" width="140" height="93" /></a></li>
<li><a href="images/fullsize/24.jpg"><img src="images/thumbs/24.jpg" alt="Rainbow over Belgium" width="136" height="98" /></a></li>
<li><a href="images/fullsize/25.jpg"><img src="images/thumbs/25.jpg" alt="Playa del Carmen" width="136" height="96" /></a></li>
<li><a href="images/fullsize/26.jpg"><img src="images/thumbs/26.jpg" alt="Panama City, Panama" width="133" height="96" /></a></li>
<li><a href="images/fullsize/27.jpg"><img src="images/thumbs/27.jpg" alt="Red frog" width="133" height="100" /></a></li>
<li><a href="images/fullsize/28.jpg"><img src="images/thumbs/28.jpg" alt="Dogs on a couch" width="133" height="99" /></a></li>
<li><a href="images/fullsize/29.jpg"><img src="images/thumbs/29.jpg" alt="Tarantula" width="133" height="97" /></a></li>
<li><a href="images/fullsize/30.jpg"><img src="images/thumbs/30.jpg" alt="Ceviche Loco" width="140" height="93" /></a></li>
<li><a href="images/fullsize/31.jpg"><img src="images/thumbs/31.jpg" alt="Playa Blanca, Panama" width="133" height="100" /></a></li>
<li><a href="images/fullsize/32.jpg"><img src="images/thumbs/32.jpg" alt="Pickles" width="133" height="99" /></a></li>
<li><a href="images/fullsize/33.jpg"><img src="images/thumbs/33.jpg" alt="Parrot" width="133" height="100" /></a></li>
<li><a href="images/fullsize/34.jpg"><img src="images/thumbs/34.jpg" alt="Panama rains" width="133" height="100" /></a></li>
<li><a href="images/fullsize/35.jpg"><img src="images/thumbs/35.jpg" alt="Cinta Costera, Panama City" width="120" height="120" /></a></li>
<li><a href="images/fullsize/36.jpg"><img src="images/thumbs/36.jpg" alt="Afternoon stroll" width="133" height="100" /></a></li>
<li><a href="images/fullsize/37.jpg"><img src="images/thumbs/37.jpg" alt="Overlooking the Panama Canal" width="138" height="94" /></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/js/photopile.js"></script>
</div>

上記のソース内容は配布しているサンプル内から抜粋している内容です。
ということで、上記コンテンツの外枠に当たる「#top_photo」の装飾を各種top.cssに記載したいと思います。

#top_photo {
	width: 900px;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 80px;
}

#top_photo:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#top_photo {
	width: 90%;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 80px;
}

#top_photo:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#top_photo {
	width: 90%;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 80px;
}

#top_photo:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

これにてメインの設定が完了しました。

上記までの設定が完了しましたら、そのままファイルを全てアップしてください。
問題なく表示されましたら設置完了です。

上記で読み込ませている「/js/photopile.js」で細かい設定がありますので、お好みに応じて適宜修正を頂くと演出内容が変わります。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
枠の取り方が若干面倒な感じがしますね。
写真の位置取りのコントロールの処理が出てくるので、そのあたりの相性が宜しくないのかもしれません。

古い画像や写真を眠らせておくにはもったいないような時には重宝するスクリプトですので、そんな時には是非使ってみてください。
フォトライブラリ的な挙動のスクリプトはたくさんあるので比較対象は多いのでアレですが、比較的に簡単に組み込めてしまうあたり、うれしいスクリプトです。

執筆 : 清水 隼斗

写真を散りばめたような動的な演出をする「Photopile JS」の使い方のAMPページ