イメージギャラリー

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのgallery()プラグインを利用してイメージギャラリーを表示します。サンプルが表示されたら「JQUERY GALLERY」の右側の「COLLECTION 1」をクリックします。すると「GALLERY1-3」が表示されますのでお好きなギャラリーをクリックします。先頭のイメージが表示されたらイメージの上部にマウスを移動します。このギャラリーに登録されているイメージのサムネイルが表示されますので選択します。イメージ上部の左右に表示されている[back]と[next]をクリックして切り替えることもできます。

このサンプルは、jQueryのgallery()プラグインを利用してイメージギャラリーを表示します。サンプルが表示されたら「JQUERY GALLERY」の右側の「COLLECTION 1」をクリックします。すると「GALLERY1-3」が表示されますのでお好きなギャラリーをクリックします。先頭のイメージが表示されたらイメージの上部にマウスを移動します。このギャラリーに登録されているイメージのサムネイルが表示されますので選択します。イメージ上部の左右に表示されている[back]と[next]をクリックして切り替えることもできます。

イメージギャラリーで表示するイメージは、images.jsファイルに格納されています。ここでは、flickr.comのイメージを表示しています。 
var images = {
'collection 1' : {
  'gallery 1' : [
    'http://farm4.static.flickr.com/3169/2658701268_f02946413d.jpg',
    'http://farm4.static.flickr.com/3156/2570392533_8a03b999b7.jpg',
    'http://farm4.static.flickr.com/3068/2545650273_8f8ca22fb5.jpg',
    'http://farm4.static.flickr.com/3024/2530880977_ff6cfc5012.jpg'
  ],
  'gallery 2' : [
    'http://farm3.static.flickr.com/2160/2150890145_1b93f5c407.jpg',
    'http://farm3.static.flickr.com/2114/2077867996_9f894fedd3.jpg',
    'http://farm3.static.flickr.com/2021/2048088388_454608c0cd.jpg'            
  ],
  'gallery 3' : [
    'http://farm3.static.flickr.com/2261/2039645366_7128d09091.jpg',
    'http://farm2.static.flickr.com/1432/627784315_5f23ba5f16.jpg',
    'http://farm2.static.flickr.com/1023/529567127_cf62646bd3.jpg',
    'http://farm1.static.flickr.com/181/484742183_c50397158f.jpg'
  ]
 }
};