fancybox

ui-component responsive modal

fancyboxはタッチ対応、レスポンシブで完全にカスタマイズ可能なjQueryライトボックススクリプトです。画像、ビデオ、HTMLコンテンツなどを美しくモダンな方法で表示できます。

Latest Ver 3.5.7

Homepage

Github

7,275

輝く瞬間、魔法が始まる。

鮮やかなイメージ体験で、あなたのウェブサイトに新しい感動を加えます。

fancyboxはウェブサイトでマルチメディアコンテンツを際立たせて表示するためのライトボックス機能を提供します。

CDNダウンロード

License: GPL-3.0

Asset Type :

すべてのバージョンを見る

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。

📄 HTML
<a data-fancybox="gallery" href="image.jpg">Open Image</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function() {
  $('[data-fancybox]').fancybox();
});
</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

⚙️ JavaScript
$(document).ready(function() {
  $('[data-fancybox]').fancybox();
});