Неполадка интеграции Blueimp Gallery с HTML и Bootstrap

Question

Я пытаюсь интегрировать галерею изображений Blueimp в веб-сайт с загрузочным блоком, а сценарий лайтбокса просто не запускается при нажатии на миниатюру. Вместо этого связанное изображение отображается на новой открытой странице, как это предполагается делать по умолчанию. Вот код:

в голове идет CSS:

ГОЛОВА:

<link rel="stylesheet" type="text/css" href="js/blueimp_gallery/css/blueimp- gallery.min.css"> 
    <link rel="stylesheet" type="text/css" href="/js/blueimp_gallery/css/blueimp-gallery-indicator.css"> 

ТЕЛО:

<div class="dgallery2 row"> 
    <div class="content"> 
     <div class="bg effect2"> 
     <div id="links"> 
      <a href="images/portfolio/1.jpg" title="Banana" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Banana"> 
      </a> 
      <a href="images/portfolio/2.jpg" title="Apple" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Apple"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange"> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange" data-gallery> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange"> 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
      <a href="images/portfolio/3.jpg" title="Orange" data-gallery > 
       <img src="images/portfolio/thumbnail.jpg" alt="Orange"> 
      </a> 
     </div> 

    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
     <a class="prev">‹</a> 
     <a class="next">›</a> 
     <a class="close">×</a> 
     <a class="play-pause"></a> 
     <ol class="indicator"></ol> 
    </div>  
    </div> 
    </div> 
    </div> 

, а затем скрипты в нижней части тела:

<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-helper.js"></script> 
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery.min.js"></script> 
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-fullscreen.js"></script> 
<script type="text/javascript" src="/js/blueimp_gallery/js/blueimp-gallery-indicator.js"></script> 
<script type="text/javascript" src="/js/blueimp_gallery/js/jquery.blueimp-gallery.min.js"></script> 
<script> 
document.getElementById('links').onclick = function (event) { 
event = event || window.event; 
var target = event.target || event.srcElement, 
    link = target.src ? target.parentNode : target, 
    options = {index: link, event: event}, 
    links = this.getElementsByTagName('a'); 
blueimp.Gallery(links, options); 
}; 
</script> 

И лайтбоксы ju st не запускается. Есть идеи? Большое спасибо!

Answer 1

Таким образом, код был прав и все, только при наличии некоторых ошибок при загрузке некоторых скриптов Javascript, которые я обнаружил через консоль ошибок в панели Developper ... поэтому я их отсортировал, и теперь blueimp работает как шарм и это тоже отзывчиво: D Спасибо в любом случае!