THE HAM MEDIA BLOG

jQuery:Simple Controls Galleryを試してみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
gallery
ギャラリー
photo
javascript
jquery

Simple Controls Galleryを試してみた

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

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

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

プレビュー

設定その1

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

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

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

設定その2

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

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の後方互換モードでの表示
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の面倒な設定が必要ない分、とっても楽なギャラリーになる。
シンプルなのになんて簡単なんだ!

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

この記事へのコメント
はじめまして。simplegalleryを設置してみたのですが分からないことがあり調べていたらこちらにたどり着きました。まったく初歩的なことかもしれませんがご教授いただければ幸いです。
私共HPのサーバーに設置するとNEXTやPLAY等のGIF画像に正しく表示されません。縦に並び、左端に位置しています。また、画像もちゃんと表示されずDLする前のサイトで表示されている画像のままです。黒ベースに白い矢印マークになりません。説明不足でお分かりにならないかもしれませんがどうぞ解決策をお教えください。よろしくお願いします。
Posted by デュレ at 2009年11月12日
>デュレさん
コメントありがとうございます。
んー、環境とかどのような設定にしたなどのソースがないので、どういう状況なのかわからないので、せめてコードと、どのブラウザでみたときの崩れなのかというのがわかればもう少しアドバイスできると思います。
現状、すべてのブラウザで、うまく表示されないとすると、考えられるのは、
・CSSはきちんと適用しているか?
#simplegallery1{}の部分もつけて、それがきちんとついているか、Firebugなどでチェックしてみたほうがいいと思います。

矢印などのパネル部分は全てpositionでつけられていますので、親ブロックにはposition: relative;が必須になります。

・画像が元のサイトのままなのは、JSのソースで、指定が元サイトのままだからだと思います。

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

ここの部分、修正していますでしょうか?

もしよろしければ、現状設定しているコードなど、メールいただくか、ここに再度かいてもらえたらと思います。
Posted by ハム at 2009年11月13日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/111383400
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。