掲題の件で行き詰っています。
参考にしたサイトはこちら
http://www.webantena.net/bootstrap/plugin-lightbox/
実装方法
➀<head></head>内に以下を記述
<!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" id="themesid"> <link href="css/bootstrap-lightbox.min.css" rel="stylesheet" >
⓶<body></body>内の終わりあたりに以下を記述
<script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/scripts.js"></script> <script src="js/bootstrap-lightbox.min.js"></script>
⓷html内に以下を記述
<div class="container"> <div class="row"> <div class="col-md-6"> <!--サムネイル--> <a data-toggle="lightbox" href="#lightbox" class="thumbnail"> <img src="img/sample-thum1.png" class="img-responsive" alt="Responsive image"> </a> <!--拡大画像--> <div id="lightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class='lightbox-header'> <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button> </div> <div class='lightbox-content'> <img src="img/sample1.png" style="max-width:100%"> </div> </div> </div> <div class="col-md-6"> <!--サムネイル--> <a data-toggle="lightbox" href="#lightbox" class="thumbnail"> <img src="img/sample-thum2.png" class="img-responsive" alt="Responsive image"> </a> <!--拡大画像--> <div id="lightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class='lightbox-header'> <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">×</button> </div> <div class='lightbox-content'> <img src="img/sample2.png" style="max-width:100%"> </div> </div> </div> </div><!--/ row-->
状況としてはライトボックスの該当箇所にカーソルを当てると
指マークには変わるのですが、クリックしてもポップアップ表示されません。
解説見ながら書いたのですが、どこに問題があるのでしょうか?
詳しい方がいらっしゃればご教示いただけるとありがたいです。
ちなみにサイトはMAMPで動かしています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/05 08:46
2017/09/05 13:42