Question

您好我正在尝试将bxslider与colorbox一起使用。我对bxslider的实现类似于列出 here 的示例。不同之处在于我只想显示寻呼机。此外，当用户点击一个寻呼机时，我希望彩色框打开并具有下一个和上一个按钮。问题是我不能用colorbox分组图像，然后下一个按钮没有显示！以下代码使用rel选项，但这样colorbox不会启动事件。

到目前为止我所尝试的是：

HTML

 <div class="slider_mini" style="position:relative;bottom:0px;">
    <div id="bx-pager">
       <a data-slide-index="0" href="image.jpg" class="imgz"><img style="width:130px;height:104px;" src="image.jpg"/></a>
       <a data-slide-index="1" href="image2.jpg" class="imgz"><img style="width:130px;height:104px;" src="image2.jpg"/></a>
       <a data-slide-index="2" href="image3.jpg" class="imgz"><img style="width:130px;height:104px;" src="image3.jpg"/></a>
    </div>                          
</div>

SCRIPT

<script type="text/javascript">
        $(document).ready(function(){

            $('.imgz').colorbox({rel:'imgz'});

            $('.bxslider.two').bxSlider({
                pagerCustom: '#bx-pager'
            });

            $('#bx-pager').bxSlider({
                slideWidth: 130,
                minSlides: 2,
                maxSlides: 3,
                moveSlides: 1,
                slideMargin: 10
            });




        });
</script>

不工作Fiddle。

反馈：问题出在我在bxslider之前调用colorbox的实时网站上。我把调用放在bxslider之后然后就可以了。谢谢。

Answer 1

可能是因为您错过了锚点中的rel属性：

<a data-slide-index="0" href="image.jpg" rel="imgz" class="imgz">
     <!---------------add the rel here---^^^^^^^^^------>
    <img style="width:130px;height:104px;" src="image.jpg"/>
</a>

带有bxslider的Colorbox无法正常工作

1 个答案:

Your fiddle in action.