jQuery/ModalWindow をテンプレートにして作成

開始行:
*ModalWindow ~ **はじめに モーダルウインドウとはメインコンテンツ上に表示されるウイ... ~ ***CONTENTS #contents2_1 ~ **LightBox http://lokeshdhakar.com/projects/lightbox2/ ~ サムネイル画像をクリックすると、元画像が呼び出されてモー... ~ -DEMO：https://koichi-inoue.github.io/JQ_LightBox/ -CODE：https://github.com/koichi-inoue/JQ_LightBox ~ ***準備 -1）ファイルセットのダウンロード http://lokeshdhakar.com/projects/lightbox2/ 　からDLして... -2） 構成ファイルの確認 DLしたファイルを解凍すると、中に様々なフォルダやファイル... --index.html --css（フォルダ） ---''lightbox.min.css'' ---style.css --js （フォルダ） ---jquery-xxxx.min.js　← 自分で用意して下さい。 ---''lightbox.min.js'' ---（script.js）LightBox自体は追加のスクリプトを必要とし... --images （フォルダ） ---''close.png'' ---''loading.gif'' ---''prev.png'' ---''next.png'' ---動作確認用の画像をいくつか用意して下さい ~ ~ ***設置の要点 この事例では、自分でオリジナルの JavaScript を書く必要は... <a href="画像ファイル名" data-lightbox="roadtrip" > <img src="サムネイル画像"> </a> ~ ***LightBox の仕組み 「クリックで拡大」の基本的なしくみは、サムネイル画像を＜a... 「はじめはサムネイルを表示、クリックで大きな画像を呼ぶ」... 後者の方法は作成側にとっては楽ですが、スムーズな閲覧のた... -「サムネイルを表示からクリックで大きな画像を呼ぶ」ケース... <a href="images/photo.jpg" data-lightbox="roadtrip"> <img src="images/photo_s.jpg"> </a> -「はじめ縮小表示しておいてクリックで拡大する」ケース：△ <a href="images/photo.jpg" data-lightbox="roadtrip"> <img src="images/photo.jpg" width=80> </a> ~ ~ **その他のオーバーレイプラグイン 続々と新しいものが登場するので、以下の検索がおすすめです。 [[Google: jQuery プラグイン モーダルウィンドウ]] ~ ***Fancybox 3 http://fancyapps.com/fancybox/3/ ~ ***FlipLightBox http://flipgallery.net/fliplightbox.html ~ ***Fluidbox http://terrymun.github.io/Fluidbox/demo/index.html ~ ***Formstone https://formstone.it/components/lightbox/ ~ ***iLigntBox http://ilightbox.net/ ~ ***iziModal http://izimodal.marcelodolce.com/ ~ ***Magnific-popup http://dimsemenov.com/plugins/magnific-popup/ ~ ***Modal Video https://appleple.github.io/modal-video/ ~ ***Photoswipe http://photoswipe.com/ ~ ***Strip http://www.stripjs.com/ ~ ***Swipebox http://brutaldesign.github.io/swipebox/ ~ ***Venobox http://veno.es/venobox/ ~ ~ ~

終了行:
*ModalWindow ~ **はじめに モーダルウインドウとはメインコンテンツ上に表示されるウイ... ~ ***CONTENTS #contents2_1 ~ **LightBox http://lokeshdhakar.com/projects/lightbox2/ ~ サムネイル画像をクリックすると、元画像が呼び出されてモー... ~ -DEMO：https://koichi-inoue.github.io/JQ_LightBox/ -CODE：https://github.com/koichi-inoue/JQ_LightBox ~ ***準備 -1）ファイルセットのダウンロード http://lokeshdhakar.com/projects/lightbox2/ 　からDLして... -2） 構成ファイルの確認 DLしたファイルを解凍すると、中に様々なフォルダやファイル... --index.html --css（フォルダ） ---''lightbox.min.css'' ---style.css --js （フォルダ） ---jquery-xxxx.min.js　← 自分で用意して下さい。 ---''lightbox.min.js'' ---（script.js）LightBox自体は追加のスクリプトを必要とし... --images （フォルダ） ---''close.png'' ---''loading.gif'' ---''prev.png'' ---''next.png'' ---動作確認用の画像をいくつか用意して下さい ~ ~ ***設置の要点 この事例では、自分でオリジナルの JavaScript を書く必要は... <a href="画像ファイル名" data-lightbox="roadtrip" > <img src="サムネイル画像"> </a> ~ ***LightBox の仕組み 「クリックで拡大」の基本的なしくみは、サムネイル画像を＜a... 「はじめはサムネイルを表示、クリックで大きな画像を呼ぶ」... 後者の方法は作成側にとっては楽ですが、スムーズな閲覧のた... -「サムネイルを表示からクリックで大きな画像を呼ぶ」ケース... <a href="images/photo.jpg" data-lightbox="roadtrip"> <img src="images/photo_s.jpg"> </a> -「はじめ縮小表示しておいてクリックで拡大する」ケース：△ <a href="images/photo.jpg" data-lightbox="roadtrip"> <img src="images/photo.jpg" width=80> </a> ~ ~ **その他のオーバーレイプラグイン 続々と新しいものが登場するので、以下の検索がおすすめです。 [[Google: jQuery プラグイン モーダルウィンドウ]] ~ ***Fancybox 3 http://fancyapps.com/fancybox/3/ ~ ***FlipLightBox http://flipgallery.net/fliplightbox.html ~ ***Fluidbox http://terrymun.github.io/Fluidbox/demo/index.html ~ ***Formstone https://formstone.it/components/lightbox/ ~ ***iLigntBox http://ilightbox.net/ ~ ***iziModal http://izimodal.marcelodolce.com/ ~ ***Magnific-popup http://dimsemenov.com/plugins/magnific-popup/ ~ ***Modal Video https://appleple.github.io/modal-video/ ~ ***Photoswipe http://photoswipe.com/ ~ ***Strip http://www.stripjs.com/ ~ ***Swipebox http://brutaldesign.github.io/swipebox/ ~ ***Venobox http://veno.es/venobox/ ~ ~ ~

ページ名: