jscafeでの発表資料

1. Colorboxでのモーダルウイン
ドウの実装
in jsCafe 2014/05/11

2. 自己紹介
• kikeda1104
• twitter: @joai1104
• facebook: Kazuyuki.ikeda.18
• GitHub: kikeda1104
• 平日は,BPS株式会社という会社
でエンジニアとして働いてます。
• 最近仕事ではフロント側(html,
css, jsなど)
週末だとruby触ってます。

3. 今日話すこと

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

5. JQuery plugin Colorbox
• Colorboxって何？
- 何ができるの?
• どうやって使うの？
• ColorBoxを使った実装
• 軽く技術ブログの宣伝

6. Colorboxって何?
何ができるの？
• 公式HPから引用すると“lightweight customizable
lightbox plugin for jQuery”
• 画像をクリックした際に別ウィンドウで画像だしたり、
画像のグルーピングとスライダーを簡易に実装できる
jQuery plugin。

7. どうやって使うの?
• サンプルコードと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

8. Colorboxを使った実装
• inlineオプションを利用したコード
• 画像のグルーピングをしたコード

9. inlineオプションを利用したコード
• https://gist.github.com/kikeda1104/7b63f2f2ebae53b94a8a

10. 画像のグルーピングをしたコード
• https://gist.github.com/kikeda1104/1b39bd7bc54a5ca0baba

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

12. http://techracho.bpsinc.jp/

13. 1. http://techracho.bpsinc.jp/ikeda-kazuyuki/
2014_03_13/15807
すみません。自分の記事です。

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

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