Ask your JavaScript questions! Pay money and get answers fast! (more info)

re-running a slide function to accomodate new number of slides. JavaScript

  • SOLVED

Hello,

I am having trouble with some of my scripts. Working answer will get the fund. Thanks.

--------------------

I am using [[LINK href="http://bxslider.com/"]]bx-slider[[/LINK]] jquery plugin to create a 2 slideshow. Please see my 2 slider functions below...



var miniSlider;
bikeSliderNav = function () {

miniSlider = $('#bike-mini-slider .wrap').bxSlider({

auto: false,
controls: true,
speed: 800,
displaySlideQty: 5,
moveSlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true

});

$('<div id="bikegallery-minislider-fade').insertAfter('#bike-mini-slider .bx-window');

};

var mainSlider;
bikeSlider = function () {

mainSlider = $('#bike-main-slider .wrap').bxSlider({
auto: false,
controls: true,
speed: 800,
onBeforeSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){

$('#bike-main-slider a.bx-prev, #bike-main-slider a.bx-next').fadeTo('fast', 0.2 );

},
onAfterSlide: function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject){

var $fadeElements = $('.bike-info-top-left, .bike-info-top-right, .bike-tech-spec'),
$specScroll = $(currentSlideHtmlObject).find('.spec-scroll'),
$techSpec = $(currentSlideHtmlObject).find('.bike-tech-spec');

$fadeElements.removeAttr('style');

sliderOpen = false;

$(currentSlideHtmlObject).find( $fadeElements ).fadeIn();

specCSS = function () {
$specScroll.css({
width : $specScroll.width() + 'px'
})
$specScroll.find('p').show();
$specScroll.find('.overview').css({
position : 'absolute'
});
$techSpec.css({
left : '-' + $techSpec.outerWidth() + 'px'
});
};

specCSS();

$specScroll.tinyscrollbar();

specSlide = function () {

if ( sliderOpen == true ) {
sliderOpen = false;
$techSpec.animate({
left : '-' + $techSpec.outerWidth() + 'px'
});
$('#bike-main-slider a.bx-prev').fadeIn();
} else {
sliderOpen = true;
$('#bike-main-slider a.bx-prev').fadeOut();
$techSpec.animate({
left : '0px'
});
scrollTo(378);
}
};

$(currentSlideHtmlObject).find('.openSpec').off('click').on('click', function (){
specSlide();
return false;
});

$('#bike-main-slider a.bx-prev, #bike-main-slider a.bx-next').fadeTo('fast', 1.0 );

$('#bike-main-slider a.bx-prev, #bike-main-slider a.bx-next').on('click', function (){
scrollTo(378);
});

}

});


$('#bike-mini-slider .wrap div').click(function() {
var thumbIndex = $('#bike-mini-slider .wrap div').index(this);
mainSlider.goToSlide(thumbIndex);
$('#bike-mini-slider .wrap div').removeClass('active');
$(this).addClass('active');
return false;
});

$('#bike-mini-slider .wrap div:first').addClass('active');


};





I am then running the two slider functions immediately after using this...



bikeSliderNav();

bikeSlider();




I then want to change the number of slides that appear in both of these slideshows, which I do using this function, and it works fine...


bikeFilter = function (y) {

$('.bike').fadeOut('fast', function() {

$('.bike[data-group=' + y + ']').fadeIn('fast');

});
return false;

};


I run this function above by clicking these buttons below...


<a href="#" title="View Supersport" onclick="bikeFilter('supersport')">Supersport</a>
<a href="#" title="View Street" onclick="bikeFilter('street')">Street</a>
<a href="#" title="View Cruiser" onclick="bikeFilter('cruiser')">Cruiser</a>



Now the problem I am having, is that when the number of visible slides changes, the slider does not work properly, because all the calculations are wrong. It obviously still thinks the original number of slides are visible.

I've tried so many things, destroyShow(), reloadShow() - I've tried re running the functions, I just cant get the slideshows to work properly with the new number of slides.

The slides all have the class .bike which means technically nothing inside my slider functions should cause any problems, I just need to successfully re-load the slideshow functions after the new number of slides have become visible.

If some one can specifically help me fix the code, It would help me lots.


So far I've tried...


bikeFilter = function (y) {

$('.bike').fadeOut('fast', function() {

$('.bike[data-group=' + y + ']').fadeIn('fast');

bikeSliderNav();

bikeSlider();

});
return false;

};


and...


bikeFilter = function (y) {

$('.bike').fadeOut('fast', function() {

$('.bike[data-group=' + y + ']').fadeIn('fast');

miniSlider.reloadShow();

mainSlider.reloadShow();

});
return false;

};


...but nothings working, all really buggy - maybe I need to unbind my entire function before re-running them again.


Thanks.

Answers (1)

2012-11-04

Ross Wilson answers:

Your mainSlider and miniSlider variables are not publicly accessable. If you declare them outside the function, or just remove the var statements before them you should be able to access them in other functions on the page (like bikeFilter). That way you can properly call mainSlider.reloadShow() and miniSlider.reloadShow() when you want to change the number of slides.


Josh Cranwell comments:

Will give it ago thanks


Josh Cranwell comments:

Ok tried it and it still having stange outcome...

Please see my original code above, have moved variable outside so it's accessible.

The see below I am performing the reloading and functions.


bikeFilter = function (y) {

$('.bike').fadeOut('fast');
$('.bike[data-group=' + y + ']').fadeIn();

mainSlider.reloadShow();

miniSlider.reloadShow();

bikeSliderNav();

bikeSlider();

return false;

};


Ross Wilson comments:

Do you have a live page where we can debug, or can you put in in a jsfiddle (http://jsfiddle.net/)?


Josh Cranwell comments:

I'll PM you.


Josh Cranwell comments:

Did you get my PM? Are you debuggin or can I try and things? Thanks


Ross Wilson comments:

I am guessing that solved your issue?


Josh Cranwell comments:

Hello,

I had to abandon, because the way bx-slider works is it uses all child nodes to calcaluate. So by hiding the slides it did not work so I am now loading the slideshows again by ajax.

Thanks for your help