We Keep Coding

Reload bxSlider when revealing previously hidden div

bxSlider has a function to reload slider(s) at a specific action. I initialise multiple sliders on my page in the following way:
jQuery('.product_carousel_images').each(function(index,item) {
jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
});
Using jQuery easytabs for a tab layout, the first slider is in the first (i.e. visible) tab and working well, while the second is generated in an initially hidden div. Since bxSlider sets the height of a slider within a div with display:none to 0, the second slider has zero-height images. visibility:hidden isn't an option, since the tabs interface doesn't allow for that.
With this multiple slider function, how can I trigger a reload of my sliders on a specific action, like clicking a tab header?

I don't use bxSlider myself, however I'm guessing you can make use of bxSlider's "reloadSlider" function.
http://bxslider.com/examples/reload-slider
Just keep a reference to your slider at initialization, then call reloadSlider on it whenever you change tabs, which in your case with easy tabs would have to make use of the easytabs:after event.
var slider = jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
// Reload slider whenever tab changes
$('#your-tabs-container').bind('easytabs:after', function() {
// TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed
slider.reloadSlider();
});
More information on EasyTabs' Event Hooks here:
https://os.alfajango.com/easytabs/#configuration

JavaScript Slider Plugin MightySlider - Need delay workaround

I purchased a slider plugin called MightySlider http://codecanyon.net/item/mightyslider-responsive-multipurpose-slider/5898508 I need a simple automated carousel that scrolls smoothly from the beginning to the end and then either loops or reverses direction. I've played with the settings enough to allow for a smooth scroll from beginning to end by setting the 'speed' and the 'cycling: {pauseTime}' parameters to be equal. No I have a delay of 20s (equal to the speed of the slider).
It's a long shot but can anyone help with the parameters to this or help me write a javascript hack to trigger the slider to start moving on page load or 1-2s after? Alternatively, could anyone recommend a different slider?
Site is here: http://smmcnyc.com/work/1919market/
JSFiddle is here: https://jsfiddle.net/fhhdxnum/
$(".frame").mightySlider({
// Mixed options
moveBy: 9000, // Speed in pixels per second used by forward and backward buttons.
speed: 20000, // Animations speed in milliseconds. 0 to disable animations.
easing: 'linear', // Easing for duration based (tweening) animations.
startAt: 10000, // Starting offset in slides.
startRandom: 0, // Starting offset in slides randomly, where: 1 = random, 0 = disable.
viewport: 'fill', // Sets the cover image resizing method used to fit content within the viewport. Can be: 'center', 'fit', 'fill', 'stretch'.
autoScale: 0, // Automatically updates slider height based on base width.
autoResize: 0, // Auto resize the slider when active slide is bigger than slider FRAME.
videoFrame: null, // The URL of the video frame to play videos with your custom player.
preloadMode: 'nearby', // Preloading mode for slides covers. Can be: 'all', 'nearby', 'instant'.
// Scrolling
scrolling: {
scrollSource: null, // Selector or DOM element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 0, // Slides to move per one mouse scroll. 0 to disable scrolling.
hijack: 300 // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
},
// Pages
pages: {
pagesBar: null, // Selector or DOM element for pages bar container.
activateOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
}
},
// Automated cycling
cycling: {
cycleBy: 'pages', // Enable automatic cycling by 'slides' or 'pages'.
pauseTime: 20000, // Delay between cycles in milliseconds.
loop: 1, // Repeat cycling when last slide/page is activated.
pauseOnHover: 0, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0 // Whether to start in paused sate.
},
});
Advice or a workaround would be very helpful!

Try nivo slider.
If you bought slider you can ask the customer support to do this.
Change cycling pouse time:
cycling: {
cycleBy: 'pages',
pauseTime: 1000,
or if this does not suit you:
I'm not sure if this is the best way, but this is how you can do this.
You will need to edit mightyslider.js
scroll down to function requestHandler and after timestamp=_now(); add (line ~2728) . These lines will start slide cycling if onLoadStart is true.
if(o.cycling.onLoadStart){
o.cycling.onLoadStart += -50;
if(o.cycling.onLoadStart == 0 || o.cycling.onLoadStart == true){
cyclingActivate();
o.cycling.onLoadStart = false;
}
}
add this value into mightySlider.defaults array line ~6648
// Automated cycling
cycling: {
.........................
startPaused: false,
onLoadStart: true
}
now you can pass in additional option into mightySlider
$(".frame").mightySlider({
........
// Automated cycling
cycling: {
..........
startPaused: 0,
onLoadStart: 1000 // true -- start immediately after load,
// false --- with delayed start,
// or enter time in miliseconds which is iess than delayed start.
}
...............
});

responsiveslides.js - auto not working

I am using this script to add responsive slideshows to a little website. I have not found a perfect slideshow script yet, and I doubt it exists. I have come from owl-slider, flux-slider to jquery basic slider, and now I have arrived at responsiveslides.js (responsiveslides.com / https://github.com/viljamis/ResponsiveSlides.js)
My Problem is, that I cannot get the auto-setting to work. This is my code to fire the plugin:
$(".rslides_home").responsiveSlides({
'pause':true
});
This setting should stop the animation, I only want it to slide per click. But it doesnt do a thing. Changing the default settings does the job though.
Has anyone an Idea how to solve that?

You are using the wrong option. "Pause" has a different meaning in the slider.
Auto-option defines if the slider is autoplaying.
$(".rslides_home").responsiveSlides({
auto: false
});
Here are the defined options for the slider. As you can see, the "pause" option is used when you want the slider to stop when hovered.
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
These options are taken from http://responsiveslides.com/

nivo slider force next slide on navigation click

I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/

Parsing JSON Encoded values as strings, booleans, etc

I have a JSON encoded object that has been localized and ultimately will fill-in a JS file for options. The expected output of the options are (the defaults and the explanation of the "type" it is looking for):
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600, //Integer: Set the speed of animations, in milliseconds
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
randomize: false, //Boolean: Randomize slide order
slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
My current HTML output of the JSON encoded object is:
/*<![
CDATA[
*/varflexslider_vars=[
];flexslider_vars={
"js_animation": "fade",
"js_slide_direction": "horizontal",
"js_slideshow": "1",
"js_slideshow_speed": "7000",
"js_animation_duration": "600",
"js_direction_nav": "1",
"js_control_nav": "1",
"js_keyboard_nav": "1",
"js_mousewheel": null,
"js_prev_text": "Prevous",
"js_next_text": "Next",
"js_pause_play": null,
"js_pause_text": "Pause",
"js_play_text": "Play",
"js_randomize": null,
"js_slide_start": "0",
"js_animation_loop": "1",
"js_pause_on_action": "1",
"js_pause_on_hover": null,
"js_controls_container": "",
"js_manual_controls": "",
"js_start_function": "function(){}",
"js_before_function": "function(){}",
"js_after_function": "function(){}",
"js_end_function": "function(){}"
};/*
]
]>*/
and this is how I am currently (and unsucessfully) adding in those options to the JS file:
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: flexslider_vars.js_animation, //String: Select your animation type, "fade" or "slide"
slideDirection: flexslider_vars.js_slide_direction, //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: flexslider_vars.js_slideshow, //Boolean: Animate slider automatically
slideshowSpeed: flexslider_vars.js_slideshow_speed, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: flexslider_vars.js_animation_duration, //Integer: Set the speed of animations, in milliseconds
directionNav: flexslider_vars.js_direction_nav, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: flexslider_vars.js_control_nav, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: flexslider_vars.js_keyboard_navjs_mousewheel, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: flexslider_vars.js_mousewheel, //Boolean: Allow slider navigating via mousewheel
prevText: flexslider_vars.js_prev_text, //String: Set the text for the "previous" directionNav item
nextText: flexslider_vars.js_next_text, //String: Set the text for the "next" directionNav item
pausePlay: flexslider_vars.js_pause_play, //Boolean: Create pause/play dynamic element
pauseText: flexslider_vars.js_pause_text, //String: Set the text for the "pause" pausePlay item
playText: flexslider_vars.js_play_text, //String: Set the text for the "play" pausePlay item
randomize: flexslider_vars.js_randomize, //Boolean: Randomize slide order
slideToStart: flexslider_vars.js_slide_start, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: flexslider_vars.js_animation_loop, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
pauseOnAction: flexslider_vars.js_pause_on_action, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: flexslider_vars.js_pause_on_hover, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: flexslider_vars.js_controls_container, //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: flexslider_vars.js_manual_controls, //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: flexslider_vars.js_start_function, //Callback: function(slider) - Fires when the slider loads the first slide
before: flexslider_vars.js_before_function, //Callback: function(slider) - Fires asynchronously with each slider animation
after: flexslider_vars.js_after_function, //Callback: function(slider) - Fires after each slider animation completes
end: flexslider_vars.js_end_function //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
So - the issue is not calling the options themselves (that seems to work fine), it's altering the actual output (a string, boolean, integer, etc) based on the needed values of the JS file, because as of right now, it's doing diddly squat because of it. I'd appreciate any nudges in the right direction. Thanks!