ライトボックスが実装できません。以下のようなコードを書いたのですが・・・・

掲題の件で行き詰っています。

参考にしたサイトはこちら
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">&times;</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">&times;</button>
  				</div>
  				<div class='lightbox-content'>
  				<img src="img/sample2.png" style="max-width:100%">
  				</div>
  				</div>
  			</div>		
          </div><!--/ row-->

状況としてはライトボックスの該当箇所にカーソルを当てると
指マークには変わるのですが、クリックしてもポップアップ表示されません。

解説見ながら書いたのですが、どこに問題があるのでしょうか？

詳しい方がいらっしゃればご教示いただけるとありがたいです。
ちなみにサイトはMAMPで動かしています。