Question

我有一个flexslider轮播，我想添加一个功能，当你点击旋转木马中的一个项目时，它会在一个灯箱中打开（我使用的是彩盒）。你如何正确实施它？顺便说一下，当我在flexslider div之外取<ul>部分时，下面的代码正确加载了颜色框。这是我正在尝试的内容：

目：

<!--jquery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--flexslider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="js/jquery.flexslider.js"></script>
<!--colorbox-->
<script src="js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="css/colorbox.css" type="text/css">
<script>
$(document).ready(function(){
   $('a.gallery').colorbox();
});
</script>

体：

<div id="flexslider" class="flexslider">
<ul>
   <li><a href="images/img01.jpg" class="gallery"><img src="images/img01.jpg" /></a></li>;
   <li><a href="images/img02.jpg" class="gallery"><img src="images/img02.jpg" /></a></li>;
   <li><a href="images/img03.jpg" class="gallery"><img src="images/img03.jpg" /></a></li>;
</ul>
</div>

Answer 1

我明白了。我需要一个简短的超时功能，以便能够正确加载所有内容。

<script>
    $(document).ready(function(){
        setTimeout(function () { //necessary to add a brief pause for colorbox to reintiate
           startColorbox();
        }, 500);
        function startColorbox() {
           $('a.gallery').colorbox();       
        }
    });
</script>

将colorbox集成到flexslider中

1 个答案: