画像をズーム表示させながら写真を入れ替えるジャバスクリプト「Spacegallery.js」
ジャバスクリプトを利用することで、ホームページをダイナミックに表現できます。
その１つとして、画像をスライドさせることで演出する、スライダー関連のスクリプトがたくさん配布されています。
今回紹介する「Spacegallery.js」は、画像をクリックすることで、画像がズームされ、同時に後ろの画像へと切り替えることのできる、今までになかった新しいタイプのスクリプトです。
ホームページのアクセントとして利用するのはもちろん、写真コンテンツのあるサイトの、１ページの滞在時間を増やしたい人にもオススメできるスクリプトではないでしょうか。
ダウンロード
下記に記載されているリンク先から、ファイル一式ダウンロードします。
「CSSフォルダ」
custom.css｜layout.css｜spacegallery.css
「jsフォルダ」
eye.js｜jquery.js｜layout.js｜spacegallery.js｜utils.js
「imagesフォルダ」
画像８枚
「htmlファイル」
index.html
設置方法
ファイル一式をダウンロードすると、余分なファイルも一緒にダウンロードされます。
そこでいったん整理しましょう。
まず、jsフォルダ内の、layout.jsは必要ありませんので削除します。
次に、CSSフォルダ内にも余分なものが多いので、spacegallery.css以外は削除しましょう。
次に、残ったspacegallery.cssに、下記タグを追加してください。
#myGallery {
width: 100%;
height: 300px;
}
#myGallery img {
border: 1px solid #52697E;
}
a.loading {
background: #fff url(../images/ajax_small.gif) no-repeat center;
}
次に、ダウンロードしたindex.htmlの <head></head>内に記述されているソースを削除し、下記のように記述しファイルを読み込みます。
次に、画像を表示させたい <body></body>内に、下記ソースを記述します。
これで設置完了です。
動作環境・スクリプトエラー報告・対処方法
| 動作環境 |
|---|
| エラー・バグ報告 |
| 不具合対処方 |
| 修正パッチ |