Colorboxでのモーダルウインドウの実装

in jsCafe 2014/05/11

自己紹介• kikeda1104

• twitter: @joai1104

• facebook: Kazuyuki.ikeda.18

• GitHub: kikeda1104

• 平日は,BPS株式会社という会社でエンジニアとして働いてます。

• 最近仕事ではフロント側(html, css, jsなど)週末だとruby触ってます。

今日話すこと

http://www.jacklmoore.com/colorbox/

Colorbox

JQuery plugin Colorbox

• Colorboxって何？- 何ができるの?

• どうやって使うの？

• ColorBoxを使った実装

• 軽く技術ブログの宣伝

Colorboxって何?何ができるの？

• 公式HPから引用すると“lightweight customizable lightbox plugin for jQuery”

• 画像をクリックした際に別ウィンドウで画像だしたり、画像のグルーピングとスライダーを簡易に実装できるjQuery plugin。

どうやって使うの?

• サンプルコードとHow toやBeginner's Guideなどそろっていてライブラリの情報が豊富。

• 1.デモ- http://www.jacklmoore.com/colorbox/example1/

• 2.Colorbox Beginner's Guide- http://www.jacklmoore.com/colorbox/guide/

• 3.lightbox- http://ja.wikipedia.org/wiki/Lightbox

Colorboxを使った実装

• inlineオプションを利用したコード

• 画像のグルーピングをしたコード

inlineオプションを利用したコード

• https://gist.github.com/kikeda1104/7b63f2f2ebae53b94a8a

画像のグルーピングをしたコード

• https://gist.github.com/kikeda1104/1b39bd7bc54a5ca0baba

軽く宣伝させてください

• 会社で技術ブログ(techracho)を書いていて、Colorboxの記事があるので軽くご紹介させてください。

http://techracho.bpsinc.jp/

1. http://techracho.bpsinc.jp/ikeda-kazuyuki/2014_03_13/15807

すみません。自分の記事です。

http://techracho.bpsinc.jp/shibuya/2014_04_07/16287

ご清聴ありがとうございました。js初心者(いけだ)より