CODEWITHSUNDEEP
jqueryappendbxslider
Lucky Soni
Lucky Soni

Reputation: 6878

BX Slider and Jquery

I am using BX Slider on my website http://kellyannart.com/test/portfolios/ .. I am facing an issue.. The BX slider is working perfect but there is some custom jQuery i want to work with it.. I have set the following parameters for bx-slider displaySlideQty: 4 infiniteLoop: true

The custom jQuery i am using is:

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

I have total 5 items inside bx-slider... but because infiniteLoop is set to true they keep on repeating.. The problem is that for the first 5 items (which is the actual number of items i have), if we click on the image then the div id="imageBox" is loaded with the same image (which is perfect).. but when we click the 6th item (which is being repeated because infinteLoop has been set to true) the big image opens in a new window instead of loading inside div id="imageBox"

Also if you click the "Read More" button for the first 5 item then it tries to load its href inside div id="imageBox" but when you click on the "Read More" button for the 6th item then it behaves perfect (i.e. open the link in the browser) I have no clue why this is happening.. Any suggestions? Thanks in advance :)

Upvotes: 3

Views: 1426

Answers (1)

Lucky Soni
Lucky Soni

Reputation: 6878

I found what was causing this... Firstly i have a slideshow enabled/disabled option for portfolio page and i load the custom jquery code for each of them.. but i didn't put an if statement to check if slideshow was enabled or disabled..So the 1st script should load when slideshow was enabled and the second should load when slideshow was disabled... in my case both were loading irrespective of slideshow enabled or disabled.. Secondly i tried 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 made sure that the script was being applied to each element.. even those that were being repeated by bx-slider. :)

Upvotes: 3

Related Questions