https://qwerty.work/tags/fancybox/ Recent content in Fancybox on qwerty.work Hugo -- gohugo.io ja-JP Fri, 19 Nov 2021 14:00:20 +0900 https://qwerty.work/post/2021/11/jquery-lightbox/ Fri, 19 Nov 2021 14:00:20 +0900 https://qwerty.work/post/2021/11/jquery-lightbox/ <h2 id="簡単で便利なlightboxを探す">簡単で便利なLightboxを探す </h2><p>画像ギャラリーの写真を拡大するLightboxで、モバイルに対応していて、設置が簡単で操作性たいいものを探してして見つけたものをメモ。</p> <h3 id="fancybox">Fancybox </h3><p>モバイルにも対応していて、設置が簡単。モーダルで表示したら「前へ」「次へ」と画像を切り替えることができ、Youtube、vimeo、GoogleマップのiFrameにも対応している。jQueryが必要。</p> <div class="link-card"> <a href="https://fancyapps.com/docs/ui/fancybox/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://fancyapps.com/docs/ui/fancybox/" alt="https://fancyapps.com/docs/ui/fancybox/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://fancyapps.com/docs/ui/fancybox/</span> <span class="link-card-url">https://fancyapps.com/docs/ui/fancybox/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/fancyapps/fancybox" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/fancyapps/fancybox" alt="https://github.com/fancyapps/fancybox" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/fancyapps/fancybox</span> <span class="link-card-url">https://github.com/fancyapps/fancybox</span> </div> </a> </div> <h4 id="cdn">CDN </h4> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/@fancyapps/ui" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/@fancyapps/ui" alt="https://www.jsdelivr.com/package/npm/@fancyapps/ui" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/@fancyapps/ui</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/@fancyapps/ui</span> </div> </a> </div> <h4 id="カスタマイズ参考">カスタマイズ参考 </h4><p>オプション設定例等、参考ページ</p> <div class="link-card"> <a href="https://me2.jp/blog/javascript/jquery_fancybox3_option.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://me2.jp/blog/javascript/jquery_fancybox3_option.html" alt="https://me2.jp/blog/javascript/jquery_fancybox3_option.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://me2.jp/blog/javascript/jquery_fancybox3_option.html</span> <span class="link-card-url">https://me2.jp/blog/javascript/jquery_fancybox3_option.html</span> </div> </a> </div> <h3 id="lightcase">Lightcase </h3><p>これもモバイルやYoutubeに対応しているが、Fancyboxの方が使いやすそう。jQueryが必要。</p> <div class="link-card"> <a href="https://cornel.bopp-art.com/lightcase/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://cornel.bopp-art.com/lightcase/" alt="https://cornel.bopp-art.com/lightcase/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://cornel.bopp-art.com/lightcase/</span> <span class="link-card-url">https://cornel.bopp-art.com/lightcase/</span> </div> </a> </div> <div class="link-card"> <a href="https://github.com/cbopp-art/lightcase" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/cbopp-art/lightcase" alt="https://github.com/cbopp-art/lightcase" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/cbopp-art/lightcase</span> <span class="link-card-url">https://github.com/cbopp-art/lightcase</span> </div> </a> </div> <h4 id="cdn-1">CDN </h4> <div class="link-card"> <a href="https://www.jsdelivr.com/package/npm/lightcase" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.jsdelivr.com/package/npm/lightcase" alt="https://www.jsdelivr.com/package/npm/lightcase" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.jsdelivr.com/package/npm/lightcase</span> <span class="link-card-url">https://www.jsdelivr.com/package/npm/lightcase</span> </div> </a> </div> <h3 id="slimbox2">Slimbox2 </h3><p>これもjQueryがあれば使えますが、モバイルには対応していません。</p> <div class="link-card"> <a href="https://www.digitalia.be/software/slimbox2/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.digitalia.be/software/slimbox2/" alt="https://www.digitalia.be/software/slimbox2/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.digitalia.be/software/slimbox2/</span> <span class="link-card-url">https://www.digitalia.be/software/slimbox2/</span> </div> </a> </div> <h3 id="magnific-popup">Magnific Popup </h3><p>これもjQueryがあれば使えます。フォームのモーダルとかに使えて機能も豊富そうです。機会があれば是非使ってみたいです。</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/" alt="https://dimsemenov.com/plugins/magnific-popup/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/</span> </div> </a> </div> <h4 id="ダウンロードページ">ダウンロードページ </h4> <div class="link-card"> <a href="https://github.com/dimsemenov/Magnific-Popup" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://github.com/dimsemenov/Magnific-Popup" alt="https://github.com/dimsemenov/Magnific-Popup" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://github.com/dimsemenov/Magnific-Popup</span> <span class="link-card-url">https://github.com/dimsemenov/Magnific-Popup</span> </div> </a> </div> <p>リファレンス参考</p> <div class="link-card"> <a href="https://dimsemenov.com/plugins/magnific-popup/documentation.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://dimsemenov.com/plugins/magnific-popup/documentation.html" alt="https://dimsemenov.com/plugins/magnific-popup/documentation.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> <span class="link-card-url">https://dimsemenov.com/plugins/magnific-popup/documentation.html</span> </div> </a> </div>