bxslider - 如何让缩略图链接到主图像

时间:2015-06-25 13:12:34

标签: javascript bxslider

我正在使用bxslider为单个记录调用图像

滑块工作正常,我将其设置为通过与特定记录相关的图像自动翻页,但是我在将缩略图链接到滑块时出现问题。

目前,如果我点击滑块下方的缩略图,它会将图像加载到灯箱中(如果这是正确的术语),而不是将滑块移动到相关图像。

以下是我正在使用的代码,我们将不胜感激 谢谢 - 梅尔

    <div> <script type="text/javascript">
    $(document).ready(function(){
    $('.bxslider').bxSlider({       
    mode: 'fade',
    captions: 'false',
    auto: 'true',
    autoControls: 'true',
    });
    });
    </script>

    <ul class="bxslider list-unstyled"><?php foreach($images as $key=>$image) { ?>
    <li class="img-responsive list-unstyled"><img src="<?php echo $image ['image']; ?>" /></li><?php } ?>
   </ul></div>

   <div id="bx-pager">

   <div class="row">
            <?php foreach($images as $key=>$image) { ?>
            <div class="col-md-3 col-sm-4 col-xs-6 bx-pager">
                <a class="image_group thumbnail" rel="image_group" href="<?php echo $image['image']; ?>" title="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
                    <img src="<?php echo $image['thumb']; ?>" alt="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
                </a>
            </div>
            <?php } ?>
        </div>

    </div>

0 个答案:

没有答案