Download - Colorbox jscafe 20140511
![Page 1: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/1.jpg)
Colorboxでのモーダルウインドウの実装
in jsCafe 2014/05/11
![Page 2: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/2.jpg)
自己紹介• kikeda1104
• twitter: @joai1104
• facebook: Kazuyuki.ikeda.18
• GitHub: kikeda1104
• 平日は,BPS株式会社という会社でエンジニアとして働いてます。
• 最近仕事ではフロント側(html, css, jsなど)週末だとruby触ってます。
![Page 3: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/3.jpg)
今日話すこと
![Page 5: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/5.jpg)
JQuery plugin Colorbox
• Colorboxって何?- 何ができるの?
• どうやって使うの?
• ColorBoxを使った実装
• 軽く技術ブログの宣伝
![Page 6: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/6.jpg)
Colorboxって何?何ができるの?
• 公式HPから引用すると“lightweight customizable lightbox plugin for jQuery”
• 画像をクリックした際に別ウィンドウで画像だしたり、画像のグルーピングとスライダーを簡易に実装できるjQuery plugin。
![Page 7: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/7.jpg)
どうやって使うの?
• サンプルコードと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
![Page 8: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/8.jpg)
Colorboxを使った実装
• inlineオプションを利用したコード
• 画像のグルーピングをしたコード
![Page 9: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/9.jpg)
inlineオプションを利用したコード
• https://gist.github.com/kikeda1104/7b63f2f2ebae53b94a8a
![Page 10: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/10.jpg)
画像のグルーピングをしたコード
• https://gist.github.com/kikeda1104/1b39bd7bc54a5ca0baba
![Page 11: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/11.jpg)
軽く宣伝させてください
• 会社で技術ブログ(techracho)を書いていて、Colorboxの記事があるので軽くご紹介させてください。
![Page 13: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/13.jpg)
1. http://techracho.bpsinc.jp/ikeda-kazuyuki/2014_03_13/15807
すみません。自分の記事です。
![Page 14: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/14.jpg)
http://techracho.bpsinc.jp/shibuya/2014_04_07/16287
![Page 15: Colorbox jscafe 20140511](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55a2c9901a28ab096c8b4636/html5/thumbnails/15.jpg)
ご清聴ありがとうございました。js初心者(いけだ)より