【ハウツー】

ゼロからはじめるSmoothGallery - 本格的スライドショー機能でパワーアップ

1 Smooth Galleryとは?

 
  • <<
  • <

1/5

Smooth Galleryとは?

Smooth GalleryはAjax(非同期通信処理)を利用して画像をスライドショーのように表示するライブラリです。画像は単独ではなく複数の画像を用意する必要があります。また、手動でスライド処理を行うようにするか、自動的にスライド表示するか、どのくらいの秒数で切り替えるかなど細かい指定も行うことができます。Smooth Galleryは、画像だけでなく画像がクリックされた時の表示先ページや、タイトル、キャプションなどを決められたタグで囲みます。他のスライド表示ライブラリと比べると若干煩雑な部分があります。

また、Smooth Galleryは単独で動作するのではなくAjaxライブラリの1つであるMooToolsを必要とする点にも注意が必要です(*1)。他のライブラリを使用している場合や、ライブラリに依存したくない場合には他のスライド表示ライブラリを使用するのがいいでしょう。

Smooth GalleryはこのURLにあるページからダウンロードすることができます(*1)。

Smooth Gallery

「Download」のタブをクリックするとダウンロードページに移動します。「Download JonDesign's Smooth Gallery 1.0.1 in Zip Format」と書かれた文字をクリックするとダウンロードが行われます。

「Download」のタブをクリック

ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

解凍後の展開図

ここで必要になるファイルはcssフォルダ、scriptsフォルダ内の全てのファイル/フォルダです(*3)。Smooth Galleryは、この2つのフォルダ構成のまま利用するようにします。

*1MooToolsは以下のサイトで詳細を見ることができます。
http://mootools.net/
*2ここではSmooth Galleryのバージョン1.0.1で説明しています。
*3scriptsフォルダ内のmootools.uncompressed.jsファイルはライブラリの非圧縮ファイルです。ここで説明するサンプルでは圧縮されたファイルを使用しているのでmootools.uncompressed.jsファイルは削除しても問題ありません。
  • <<
  • <

1/5

インデックス

目次
(1) Smooth Galleryとは?
(2) Smooth Galleryを使う
(3) 一定時間ごとに切り替えて表示させる
(4) ショーケースのタブを日本語にする
(5) クリックされたらスライド表示を行う

人気記事

一覧

新着記事

ガンタンクver.A.N.I.M.E.が魅せるアクションはなんとメンテナンス場面 - ギミック豊富なホワイトベースデッキがセットで登場
[22:26 9/25] ホビー
行こうぜ、 とら。「うしおととら」コンビがねんどろいどで登場
[22:21 9/25] ホビー
アニメ「ワンパンマン」2期制作決定!古川慎「ワクワクが止まりません」
[22:00 9/25] ホビー
マツコも大絶賛した札幌の逸材「やすおちゃん」
[22:00 9/25] エンタメ
大石浩二、麻生周一らジャンプ作家が「ポセ学」大江しんいちろうイベントに
[21:18 9/25] ホビー