Hello I am trying to use bxslider with colorbox. My implementation of bxslider is like an example listed here. The difference is that I want only the pagers to be shown. Also when the user clicks one pager I want colorbox to open and have next and previous buttons. The problem is that I cant group the images with colorbox and next and previous button is not shown! The following code uses the rel option but with this way colorbox doesnt event start.

What I have tried till now is:

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>

Not working Fiddle.

Feedback: The problem was in live website that I was calling colorbox before bxslider. I put the call after bxslider's and it works. Thank you.