THE HAM MEDIA BLOG

なんだかいろんなところで紹介されている、
シンプルだけどかっこいいフォトギャラリー、
「Simple Controls Gallery」

使いやすいのかどうかも見るために使ってみることにした。

設定の仕方や注意点なども書いておいたので参考にしてください。

プレビュー

設定その１

ここでは主に表示される部分の枠や画像の設定。

var mygallery=new simpleGallery({
  wrapperid: "simplegallery1",
  dimensions: [300, 225],
  imagearray: [
    ["画像URL", "リンク先、なければ空白", "_newなら別窓"],
    ["画像URL", "", ""],
    ["画像URL", "", ""],
    ["画像URL", "", ""]
  ],
  autoplay: true,
  persist: false,
  pause: 2500,
  fadeduration: 500,
  oninit:function(){
    },
  onslide:function(curslide, i){ 
  }
})

○ wrapperid

ギャラリーを表示させる場所のID

○ dimensions

表示させる枠のサイズ。dimensions:[横,縦]

○ imagearray

["画像URL", "リンク先、なければ空白", "_newなら別窓"]

○ autoplay

trueなら自動でスライドショー開始。falseなら手動。

○ persist

trueなら最後に見た画像を記憶しておく。falaseなら記憶しない。

○ pause

一枚の画像が表示されている時間。単位はミリ秒(1000=1秒)

○ fadeduration

画像の切り替え時のフェードイン・アウトにかかる時間。同じく単位はミリ秒。

設定その２

ここではコントロールパネル部分の設定

var simpleGallery_navpanel={
panel: {
	height:'45px',
	opacity:0.5,
	paddingTop:'5px',
	fontStyle:'bold 11px Verdana'
},
images: [ 'left.gif', 'play.gif', 'right.gif', 'pause.gif'],
imageSpacing: {offsetTop:[-4, 0, -4], spacing:10},
slideduration: 500
}

○ panel

パネルのCSS設定。
heightが高さ、opacityが透明度（0が透明）、
paddingTopがコントロール画像のパネル上部からの位置、
fontStyleが枚数表示の文字部分・・・となる。

○ images

画像のURLの指定。保存場所にあわせて画像の保存場所を指定する。

○ imageSpacing

コントロール画像の位置調整。
offsetTopはパネル上からの位置、spacingが画像同士の左右の間隔。

○ slideduration

パネルが表示されるまでの時間を設定。単位はミリ秒。

使用する際の注意点＆覚えておく方がいいこと

このプラグイン、かなり簡単に使える！ってことがわかったが、
ちょっとだけ注意することがあった。
また、覚えておいたほうがいい点もいくつかあったので書いておく。

◆ 画像追加の際のコンマに注意（IEで表示されなくなる）

ギャラリー画像の設定をする際、
一番最後の指定部分の末尾にはコンマをつけないこと。
コンマをつけてしまうと、IEで表示されなくなるので注意が必要。
基本的に配列の最後にコンマつけるとIEでエラーなので、
このプラグインだけじゃなく、いろいろなところで注意です。

◆ IE6で後方互換モード時のボーダーとパネルが重なる

これは個人的に一番の落とし穴だったと思う。
後方互換モードだとボックスのレンダリングが少し変わるから、
ボーダーも指定の枠内に入ってしまう。
すると、マウスを乗せた時の下からでてくるコントロールパネルが
ボーダーと重なってしまうことになってしまう。
xml宣言している場合などは要注意。

ちなみに上で表示しているサンプルもIE6で見ると重なっている。

回避方法は標準準拠モードにしておくか、
もしくはボーダーを使わないのどちらかだろう。

だからなのか、一応対応がIE7+になっている。
このモードさえ違わなければIE6でも大丈夫ですけどね。

↓IE6の後方互換モードでの表示

◆ 画像のサイズに注意

もう一つ気をつけていたほうがいいのは画像のサイズ。
サイズ指定をする欄があるが、そのサイズはあくまで枠の大きさ。
表示される画像は元の大きさのまま表示されてしまう。
つまり、枠の大きさが画像よりも小さければ画像は切れて表示され、
枠の大きさが画像よりも大きい場合は背景黒く表示される。

表示される大きさはdimensions: [###, ###]で指定できるから、
画像の大きさにあわせて指定するように。
ちなみに左が横幅で右が縦幅の大きさ指定になる。

おまけ：CSSのボーダー設定

配布元の解説でデフォルト設定で入っているけど、
これは別になくてもいいっぽい。はずしても問題なく表示された。
でも一応書いておきます。

#simplegallery1{ //CSS for sample Gallery
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

指定さえできれば簡単に表示される。

ほとんどの指定がScript部分でできるので、
設定さえできたらCSSの設定も特になく表示することが出来る。
CSSの面倒な設定が必要ない分、とっても楽なギャラリーになる。
シンプルなのになんて簡単なんだ！

僕もこういうのを作れるようになりたいものです。