MB-Support

パソコン初心者のサポートページ

4.ホームページにフルスクリーンスライドショーを設置する方法

 無料で使える PicLens Publisher は、ウィザード形式でスライドショーが作成できるツールです。 このページでは、gallery.html に埋め込まれた span と、RSS に埋め込まれた guid の関係、同一ページに複数のスライドショーを設置するための ID の使い方を紹介します。


前回 からの続きで、PicLens Publisher で作成されたファイルを説明します。



各サムネイルを表示する部分

初期状態では、クラス gallery が指定されたテーブルで構成されています。テーブル内の <td> 〜 </td> に、サムネイルが順番に表示されます。


<td>
	<a href="pl_images/hamaki001.jpg">
	<img src="pl_thumbs/hamaki001_thumb.jpg">
	<span class="mbf-item">
	#gallery a2a847c0-ddc0-4298-9494-6c73a04c2b9c
	</span>
	</a>
</td>

<a href="pl_images/hamaki001.jpg">

これは、その後にあるサムネイルをクリックした時にアクセスする画像へのアドレスです。 つまり、オリジナルサイズのアドレスが指定されています( pl_images フォルダ内 )。 初期状態では gallery.html から移動する事になり、もし、別ウインドウで表示させたければ、以下の様に変更します。

<a href="pl_images/hamaki001.jpg" target="_blank">


<img src="pl_thumbs/hamaki001_thumb.jpg">

これは、PicLens Publisher で作成されたサムネイル画像を表示するソースです(pl_thumbs内)。 オリジナルサイズ、サムネイルの場所を変更した場合は、この二つのアドレスを変更して、RSS に記述されたアドレスも変更する必要があります。 つまり、自力でファイルを作成したのであれば、オリジナルサイズの画像とサムネイルの画像を分ける必要もありません。



<span class="mbf-item">#gallery 英数字</span>

クラス mbf-item が指定されているので、スタイルシート部の.mbf-itemを削除していなければ、<span> 〜 </span> に記入された文字は、ページに表示される事はありません。 この数字はスライドショーで利用する画像全てと重複してはなりません。PicLens Publisher は自動で生成されるので、そのまま利用しましょう。 この英数字の意味する事は、同じく PicLens Publisher で作成された photos.rss の item(各画像データ)の guid と共通しています。 スライドショーを実行するために、この guid は絶対に必要であるとは言えません。 現に手書きで作成したrssでも、media:thumbnail(サムネイルの相対パス)と media:content(オリジナル画像の相対パス)があれば動作しました。

しかし、スライドショーは PicLens と呼ばれるブラウザの拡張機能がインストールされた環境では、3D ビューアに移行できます。3D ビューアに関しては以下。

3D 画像検索 PicLens Beta with 3D インストール方法



PicLens は、大手の画像検索サイトで利用可能な3Dビューアで、ホームページを制作する側が制御するものではなく、クライアントがインストールして利用するブラウザのプラグインです。 これをインストールして利用しているユーザーが、スライドショーが埋め込まれたページを参照すると、サムネイルから 3D ビューアに移行できます。 各サムネイルにポインタをのせると、左下に 3D ビューアへ移行する「→」アイコンが表示されます。



このアイコンを左クリックすると、3D ビューアでスライドショーで表示するために作成した画像を表示する事ができます。 これは自分で作成した写真集の 3D ビューアであり、検索サイトから引っ張ってきたデータではありません。 PicLens Publisher で自動作成された photos.rss のデータを元に表示しています。

この「→」アイコンは、以下の記述が gallery.html に含まれていると表示されます。

<td>
	<a href="pl_images/hamaki001.jpg">
	<img src="pl_thumbs/hamaki001_thumb.jpg">
	<span class="mbf-item">
	#gallery a2a847c0-ddc0-4298-9494-6c73a04c2b9c
	</span>
	</a>
</td>


この英数字は、a href に囲まれています。さらにスタイルシートの mbf-item により非表示となっています。 ブラウザでスタイルシートを無効にすれば、右の様に表示されます。



対応した英数字を元に、gallery.html の各サムネイルから3ビューアに移行した時、クリックしたサムネイルが選択された状態で表示されます。 この英数字は、重複しないのであれば変更する事も可能です。



gallery.html

<td><a href="pl_images/hamaki001.jpg">
	<img src="pl_thumbs/hamaki001_thumb.jpg">
	<span class="mbf-item">#gallery 001</span>
</a></td>

Photos.rss

<item>
	<title>hamaki001</title>
	<link>pl_images/hamaki001.jpg</link>
	<guid>001</guid>
	<media:thumbnail url="pl_thumbs/hamaki001_thumb.jpg" />
	<media:content url="pl_images/hamaki001.jpg" type="" />
</item>

これで同じ動作が可能です。2 番目以降の画像は、002 、003 、004 と入力します。

PicLens Lite TEST - サンプル2



スライドショーへ移行するボタン

<a href="javascript:PicLensLite.start();">Start Slide Show
 <img src="http://lite.piclens.com/images/PicLensButton.png"
  alt="PicLens" width="16" height="12" border="0" align="absmiddle"></a>

このソースは、右のスライドショーへ移行するためのボタンを意味します。 このボタンを左クリックしてスライドショーへ移行するために必要なファイルは、head に埋め込まれた外部 JavaScript と、photos.rss です。

<script type="text/javascript"
 src="http://lite.piclens.com/current/piclens.js"></script>
<link rel="alternate" href="photos.rss" type="application/rss+xml"
 title="" id="gallery" />

PicLens Lite TEST - サンプル1



photos.rss と span に指定された IDとは

<link rel="alternate" href="photos.rss" type="application/rss+xml"
title="" id="gallery" />
<!-- 省略 -->
<td><a href="pl_images/hamaki001.jpg">
	<img src="pl_thumbs/hamaki001_thumb.jpg">
	<span class="mbf-item">
	#gallery a2a847c0-ddc0-4298-9494-6c73a04c2b9c
	</span>
</a></td>

これを解釈すると、サムネイル pl_thumbs/hamaki001_thumb.jpg をクリックした時に、対応する RSS は id="gallery"(ヘッダーに挿入された)である事。 この例では、photos.rss を使ってスライドショーや 3D ビューアを実行します。



もし、一つのページに異なる 2 つ以上のスライドショーを設定させたい場合は、この ID を異なるものにします。



<link rel="alternate" href="photos.rss" type="application/rss+xml"
 title="" id="photos" />
<link rel="alternate" href="bbs.rss" type="application/rss+xml"
 title="" id="bbs" />
<table><tr>
<!-- photos.rssの画像 -->
<td><a href="pl_images/hamaki001.jpg">
	<img src="pl_thumbs/hamaki001_thumb.jpg">
	<span class="mbf-item">
	#photos a2a847c0-ddc0-4298-9494-6c73a04c2b9c
	</span>
</a></td>

<!-- bbs.rssの画像 -->
<td><a href="pl_images/bbs001.jpg">
	<img src="pl_thumbs/bbs001_thumb.jpg">
	<span class="mbf-item">
	#bbs aee655773d856fb038536adcfd6472fc7543463e
	</span>
</a></td>
</tr></table>

これで、それぞれのサムネイルをクリックした時に、対象となる RSS ファイルを変える事ができます。

PicLens Lite TEST - サンプル3




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項