BX Slider and jQuery

I use BX Slider on my website http://kellyannart.com/test/portfolios/ .. I am facing a problem. The BX slider works perfectly, but there it is some kind of custom jQuery that I want to work with. I set the following parameters for bx-slider displaySlideQty: 4 infinLoop: true

The custom jQuery I'm using is:

jQuery(".single_portfolio_item_archive a").click(function(evt) {
evt.preventDefault();
jQuery("#imageBox").empty().append(
    jQuery("<img>", { src: this.href})
);
});

I have only 5 elements inside the bx slider ... but because infinLoop is set to true, they keep repeating. The problem is that for the first 5 elements (this is the actual number of elements that I have), if we click on the image, then div id = "imageBox" is loaded with the same image (which is perfect) .., but when we click 6th element (which repeats because infinteLoop is set to true) a large image opens in a new window instead of loading inside div id = "imageBox"

, " " 5- , href div id = "imageBox" , " " 6- , (.. ) , . - ? :)

+3
1

, ... -, / - , jquery . if, , - . , script -, , - ... -, . -, document.ready()

<?php 
if( is_post_type_archive( 'portfolios' ) || is_taxonomy( 'styles' ) || is_taxonomy( 'colors' ) || is_taxonomy( 'textures' ) || is_taxonomy( 'years' ) ) : ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".single_portfolio_item_archive a").click(function(evt) {
evt.preventDefault();
jQuery("#imageBox").empty().append(
    jQuery("<img>", { src: this.href})
);
})
});
</script>
<?php endif; ?>

document.ready , script .. , bx-.:)

+3

All Articles