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.
