SmoothGalleryをXOOPSで使う（champagne_goldへのスライドショー設定方法）

カスタマイズ＆運用TIPS : SmoothGalleryをXOOPSで使う（champagne_goldへのスライドショー設定方法）

投稿者 : taka 投稿日時： 2007-4-26

各種ファイルの作成・編集（１）- slideshow.htmlをつくる

少しソースの量があるので、またこのスライドショー自体をメンテすることもふえるでしょうし、theme.html内で作業をあまりしたくないですね。なので、slideshow.htmlという別ファイルを作成して下さい。（配置場所はtheme.htmlと同じ階層に）とりあえず中身はおまじないだと思って、下記としてみてください。

<script type="text/javascript">
	function startGallery() {
		var main_img = new gallery($('main_img'), {
			timed: true,
			showArrows: false,
			showCarousel: false,
			showInfopane: false,
			embedLinks: false,
			delay: 10000,
			fadeDuration: 2000
		});
		document.gallery = main_img;
	}
	window.onDomReady(startGallery);
</script>
<div id="main_img">
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img.jpg" class="full" alt="" />
	</div>
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img_02.jpg" class="full" alt="" />
	</div>
	<div class="imageElement">
		<img src="<{$xoops_imageurl}>images/main_img_03.jpg" class="full" alt="" />
	</div>
</div>

とりあえず今回は例ですから、テーマセット内に入っている2枚をローテーションするような設定です。
説明すべきポイントはいくつかありますが、まずこのテーマの該当部分は、本当に雰囲気を出すためだけのもので、写真を説明するだとかいう趣旨ではありませんので、とにかくSmartGalleryの標準機能を隠します。
その設定が

	timed: true,
	showArrows: false,
	showCarousel: false,
	showInfopane: false,
	embedLinks: false,
	delay: 10000,
	fadeDuration: 2000

の部分です。

function startGallery のオプション設定

timed が、オートスライドにするかどうか？
showArrows が、次へや前へ、のクリックが出来るようにするかどうか？
showCarousel が、サムネイル一覧表示部を使うかどうか？
showInfopane が、タイトルや説明文を使うかどうか？
embedLinks が、元画像へのリンクをするかどうか？
delay が、一枚の画像の表示時間（ミリセカンド）
fadeDuration が画像のクロスフェードの時間（〃）

この様にSmartGalleryは、用意するファイル側からかなりのオプション設定を渡すことができるため、本体スクリプトに手を入れることなく思い通りの効果を得ることが出来ます。ですので、一回設置してしまえば、picoでも、myalbumでも、カスタムブロックでも、いろいろなところからギャラリーをつくれてしまうわけです。