【ハウツー】

ゼロからはじめる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) クリックされたらスライド表示を行う

人気記事

一覧

新着記事

[森川葵]ドラマ「プリンセスメゾン」でNHK初主演 26歳独身の“家買う女”に
[22:50 8/30] エンタメ
赤塚不二夫と過ごしたフジオ・プロの日々、元アシスタントが綴るコミックエッセイ
[22:49 8/30] ホビー
[錦織圭選手]銅メダルの自信をもって“今年の目標”の全米へ
[22:46 8/30] エンタメ
至福の一皿も!山崎童々、グルメマンガ発売イベントでツレヅレハナコと語る
[22:32 8/30] ホビー
「SUPER LOVERS」2期のティザービジュアル公開、公式サイトもリニューアル
[22:29 8/30] ホビー