読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:jQueryのColorboxをVisualforceページで動かしてみました

jQueryのColorboxをVisualforceページで動かしてみました。Colorboxは画像をクリックしたときに拡大表示してくれるjQueryプラグインです。

f:id:tyoshikawa1106:20140107210619p:plain


サンプルコードはこちらです。

tyoshikawa1106/Apex_JQueryColorBox · GitHub


Colorboxのサイトはこちらになります。

Colorbox - a jQuery lightbox


Colorboxでは複数のテーマが用意されています。テーマはそれぞれexample1 ~ example5までのフォルダに分けられています。上記サンプルコードの場合は次の赤枠内をexample1 ~ example5に変更することで切替ができます。

f:id:tyoshikawa1106:20140107221517p:plain

example1

f:id:tyoshikawa1106:20140107210619p:plain

example2

f:id:tyoshikawa1106:20140107220616p:plain

example3

f:id:tyoshikawa1106:20140107220701p:plain

example4

f:id:tyoshikawa1106:20140107220745p:plain

example5

f:id:tyoshikawa1106:20140107220822p:plain


オプションも充実していて複数画像のグループ分けや表示する画像の幅や高さ、表示速度などいろいろとカスタマイズも可能みたいです。


下記リンク先の画像をクリックした時に動作するようにしてみました。
Force.comサイトの開発のときにすごく便利だと思います。

勉強のためにつくったForce.comサイト