gpt4 book ai didi

javascript - blueimp 画廊灯箱未加载图像

转载 作者:行者123 更新时间:2023-11-28 01:16:46 26 4
gpt4 key购买 nike

我正在设置 blueimp lightbox,lightbox 正在启动,但没有加载/显示图像,是新的,我应该在脚本中添加什么以允许它找到图像..?我希望能够让灯箱显示来自单击的任何缩略图的图像...感谢您的帮助。

这是我的代码:

<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>

最佳答案

我用你的代码在这里工作得很好:http://jsfiddle.net/3su8Y/

想知道您的 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>

关于javascript - blueimp 画廊灯箱未加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23743987/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com