Javascript blueimp gallery lightbox未加载图像

Javascript blueimp gallery lightbox未加载图像,javascript,twitter-bootstrap-3,blueimp,Javascript,Twitter Bootstrap 3,Blueimp,我正在设置blueimp lightbox,lighbox正在启动,但没有加载/显示图像,如果是新的,我应该在脚本中添加什么以允许它查找图像。。?我想只是能够有从任何缩略图点击lighbox显示图像。。。 谢谢你的帮助 这是我的密码: <body> . . . <div class="container marketing"> <div class="row"> <div class="col-md-

我正在设置blueimp lightbox,lighbox正在启动,但没有加载/显示图像,如果是新的,我应该在脚本中添加什么以允许它查找图像。。?我想只是能够有从任何缩略图点击lighbox显示图像。。。 谢谢你的帮助

这是我的密码:

<body>
  .
  .
  .

  <div class="container marketing">  
    <div class="row">      
      <div class="col-md-12">
        <!--slideshowarea-->
        <div class="col-md-offset-2 col-md-10">

          <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
            <!-- The container for the modal slides -->
            <div class="slides"></div>
            <!-- Controls for the borderless lightbox -->
            <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><!-- blueimp-gallery -->

          <!--links-->    
          <div id="links">
            <div class="row">      
              <div class="col-md-12" id="links1row">
                <a href="./imgs/ibiziriko/1.0.jpg" title="Banana" >
                  <img src="./imgs/thumbnails/ibiziriko/1.jpg" alt="Banana" class="img-thumbnail">
                </a>
              <a href="./imgs/ibiziriko/2.0.jpg" title="Apple" >
                <img src="./imgs/thumbnails/ibiziriko/2.0.jpg" alt="Apple" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/4.jpg" title="Orange" >
                <img src="./imgs/thumbnails/ibiziriko/4.jpg" alt="Orange" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/5.jpg" title="Orange" >
                <img src="./imgs/thumbnails/ibiziriko/5.jpg" alt="Orange" class="img-thumbnail">
              </a>                  
            </div>
          </div>
          <div class="row">      
            <div class="col-md-12" id="links2row">                  
              <a href="./imgs/6.0.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/6.0.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/7.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/7.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/8.0.jpg" title="Banana">
                <img src="./imgs/thumbnails/ibiziriko/8.0.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/8.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/8.jpg" alt="Banana" class="img-thumbnail">
              </a>
            </div>
          </div>              
          <div class="row">      
            <div class="col-md-12" id="links1row">
             <a href="./imgs/ibiziriko/9.jpg" title="Banana" >
                <img src="imgs/thumbnails/ibiziriko/9.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/10.0.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/10.0.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/10.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/10.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/11.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/11.jpg" alt="Banana" class="img-thumbnail">
              </a>                  
            </div>
          </div> 
          <div class="row">      
            <div class="col-md-12">
              <a href="./imgs/ibiziriko/12.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/12.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/13.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/13.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/14.1.jpg" title="Banana" >
                <img src="imgs/thumbnails/ibiziriko/14.1.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/14.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/14.jpg" alt="Banana" class="img-thumbnail">
              </a>
            </div>
          </div>              
          <div class="row">      
            <div class="col-md-12">                    
              <a href="./imgs/ibiziriko/16.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/16.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/18.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/18.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/21.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/21.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/22.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/22.jpg" alt="Banana" class="img-thumbnail">
              </a>
            </div>
          </div>              
          <div class="row">      
            <div class="col-md-12">                  
              <a href="./imgs/ibiziriko/23.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/23.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/24.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/24.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/25.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/25.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/26.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/26.jpg" alt="Banana" class="img-thumbnail">
              </a>
            </div>
          </div>
          <div class="row">      
            <div class="col-md-12">                  
              <a href="./imgs/ibiziriko/27.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/27.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/28.jpg" title="Banana" >
                <img src="imgs/thumbnails/ibiziriko/28.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/29.jpg" title="Banana" >
                <img src="./imgs/thumbnails/ibiziriko/29.jpg" alt="Banana" class="img-thumbnail">
              </a>
              <a href="./imgs/ibiziriko/30.jpg" title="Banana" >
               <img src="./imgs/thumbnails/ibiziriko/30.jpg" alt="Banana" class="img-thumbnail">
              </a>
            </div>
          </div>              
        </div><!--/links-->
      </div>
    </div> 
 </div><!--/row--> 
    .
    .
    .      

</div><!-- /.container -->


<script src="./dist/js/jquery-1.11.0/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<script src="./docs/assets/js/docs.min.js"></script>
<script src="./js/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>

.
.
.
.
.
.      
document.getElementById('links').onclick=函数(事件){
event=event | | window.event;
var target=event.target | | event.src元素,
link=target.src?target.parentNode:target,
选项={index:link,event:event},
links=this.getElementsByTagName('a');
blueimp.Gallery(链接、选项);
};

我在这里可以很好地使用您的代码:

想知道您的
href
是否没有指向正确的图像。缩略图和主图像都必须有不同的文件

<a href="http://placehold.it/400x400&text=Photo" title="Banana">
  <img src="http://placehold.it/100x100&text=Thumbnail" alt="Banana" class="img-thumbnail">
</a>