jquery.colorbox.jsを使用してlightbox風に別URL先のページを表示
- 2019.04.17
- JavaScript jQuery
- colorbox, iframe, jquery.colorbox.js, lightbox

ライトボックスって単語を良く耳にしますが、そんな雰囲気で別URLの指定別ページを表示してみます。
1.読み込むCSS、JsファイルとJavaScriptの記述例
<link rel="stylesheet" href="colorbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.colorbox.js"></script> <script><br /> $(document).ready(function(){<br /> $(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});<br /> }); </script>
2.HTMLの記述例
<a class="iframe" href="https://dad-union.com">このリンクをクリック</a>
↑だけです。
jquery.colorbox.jsでightbox風に別ページ(iframe)を表示
ソース元:Colorbox – a jQuery lightbox
その他、画像や動画(YouTube等)の表示も出来る様ですね。
冒頭でも言いましたがライトボックス風に表示して下さいって感じのアレです。
※流用される場合は自己責任でお願いします。
-
前の記事
jQueryを使って複数画像をフェードインフェードアウトで切替表示 2019.04.16
-
次の記事
jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる 2019.04.18