I am testing some new stuff on responsive sliders, and I got stranded on something while using this plugin: http://responsiveslides.com/
Can anyone help me on how to create a start/stop function for the slider? I want to have a start/stop option, to control if the slider is automatically switching between slides or paused, giving the user a bit more control.
The only option available in the slider yet is to start/stop on hover. I need it to start/stop when I click a custom element in the DOM.
you will need to add some code to the plugin.
First, create a variable named forcePause:
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
forcePause = false, // <---- here!
In the restartCycle method you need to check if the paused is forced or not:
restartCycle = function () {
if (settings.auto) {
// Stop
clearInterval(rotate);
if ( !forcePause ) // new line
// Restart
startCycle();
}
};
After that, you can add something like that in the line 300:
$( '.pause_slider' ).click( function( e ){
e.preventDefault();
forcePause = true;
$( this ).hide()
$( '.play_slider' ).show();
clearInterval(rotate);
});
$( '.play_slider' ).click( function( e ) {
e.preventDefault();
forcePause = false;
$( this ).hide();
$( '.pause_slider' ).show();
restartCycle();
});
You will need two HTML elements with each class to do his work. The forcePause avoid to restart de slider after hovering it.
I know it's not the best solution ever, but it does the trick.
You can see it working here:
http://jsbin.com/eHaHEVuN/1/
Also you will find the code. :) I hope this works for you.
Control start/stop with pause parameter:
$(".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: true, // 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
});
There's another simple solution - enable pause on hover, then emulate hover:
JS:
$(".rslides").responsiveSlides({
pause: true
});
$('.carousel-pause .pause').click(function(e){
$(this).hide();
$('.play').show();
$('.rslides').trigger('mouseenter');
});
$('.carousel-pause .play').click(function(e){
$(this).hide();
$('.pause').show();
$('.rslides').trigger('mouseleave');
});
HTML:
<div class="carousel-pause">
<span class="pause">Pause</span>
<span class="play">Play</span>
</div>
Built off of answer from #miduga to get solution tailored to allow external events to pause slide show.
I ended up creating a global variable of window.responsiveSlidesForcePause that is used in the rotate interval to determine if rotate should occur. Ideally, there should be a public method that pauses the individual slideshow, but this is a quick hack that will pause any slideshow on the page. My situation only needed a single slideshow on a page that will have a short lifespan.
http://jsfiddle.net/egeis/wt6ycgL0/
Initialize global variable:
return this.each(function () {
// Index for namespacing
i++;
window.responsiveSlidesForcePause = false; // new global variable
var $this = $(this),
Use global variable:
startCycle = function () {
rotate = setInterval(function () {
if (!window.responsiveSlidesForcePause) { // new if statement
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}
}, waitTime);
};
Which allows the events that pause the slideshow to be outside the actual plugin.
$(document).ready(function() {
$( "#slider" ).responsiveSlides({ nav: true, prevText: '', nextText: '' });
$( ".pause_slider" ).on("click", function (e) {
e.preventDefault();
$(this).hide();
$( '.play_slider' ).show();
window.responsiveSlidesForcePause = true;
});
$( '.play_slider' ).click( function(e) {
e.preventDefault();
$( this ).hide();
$( '.pause_slider' ).show();
window.responsiveSlidesForcePause = false;
});
});
Related
This is more of a tip than a question, but i hope others find this useful.
Basically i needed to make the lightbox slider called 'Swipebox' auto transition to the next slide, I looked online for help but found nothing.
to add this feature to the plugin i added this code:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
The file for this JS is called 'jquery.swipebox.js'. This is the code where you want to place the code previously mentioned:
/**
* Navigation events : go to next slide, go to prevous slide and close
*/
actions : function () {
var $this = this,
action = 'touchend click'; // Just detect for both event types to allow for multi-input
if ( elements.length < 2 ) {
$( '#swipebox-bottom-bar' ).hide();
if ( undefined === elements[ 1 ] ) {
$( '#swipebox-top-bar' ).hide();
}
} else {
$( '#swipebox-prev' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getPrev();
$this.setTimeout();
} );
$( '#swipebox-next' ).bind( action, function( event ) {
event.preventDefault();
event.stopPropagation();
$this.getNext();
$this.setTimeout();
} );
}
$( '#swipebox-close' ).bind( action, function() {
$this.closeSlide();
} );
// THIS IS THE NEW CODE ADDED:
setInterval(function(){
$this.getNext(); // Auto transitions each slide
}, 5000);
},
This function is around about 550 lines down.
Also, to make the slideshow loop back around, you will need to change the option called 'loopAtEnd' from FALSE to TRUE. This is located at the top of the document.
loopAtEnd: true,
Hope this helped :)
I am trying to compile a basic jQuery plugin which shows a div upon provided options when invoking:
select if a checkbox should be checked after X milliseconds or after X px on scroll,
if one of those two options are selected, set a delay value or scroll distance in px
otherwise do nothing
Example of desired options invoke:
$(document).ready( function() {
$('#testInput').testing({
myMethod : delay,
myValue : 2000
});
});
My current progress here: JSFiddle (it's not much as currently I'm still at a beginning of the learning curve)
After some fiddling i managed to get this working (kinda). Plugin seems to be working fine. Except there is some bug with the scroll function which i have to sort it out additionaly - it loops and changes checkbox states indefinitely instead just once.
Here is a working fiddle
And modified code:
(function($) {
$.fn.testing = function( options ) {
// Settings
var settings = $.extend({
delay : null,
delayTime : null,
scrolling : null,
scrollDist : null
}, options);
return this.each( function() {
var self = this;
// Timeout
setTimeout(function (){
$(self).prop('checked', settings.delay);
}, settings.delayTime);
// Scroll
if ($(window).scrollTop() > settings.scrollDist) {
$(this).prop('checked', settings.scrolling);
};
});
}
}(jQuery));
// Plugin invoke
$(window).on("load resize scroll",function(){
$('#testInput').testing({
delay : false,
delayTime : null,
scrolling : true,
scrollDist : 20,
});
});
I'm having difficulties updating the contents of a DIV with the current slide of my jQuery Cycle slideshow.
Here is the slider function, it currently will output the current slide as an alert (and works).
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});
The DIV is as follows:
<div id="test">Hello</div>
And the code I'm trying to use (to replace the end of the code above):
$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});
Any thoughts on why the DIV does not update with the current slide #?
Unfortunately, nothing happens. I'm still learning my way around JS, so any pointers are much appreciated! Thank you for your time.
That variable in opts object (opts.currSlide) is not defined outside of the cycle function/plugin
so you would have to pass it to the function
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
getCurrSlide(opts.currSlide);
}
});
}):
function getCurrSlide(curr){
$("#test").html(curr);
}
OK. I have made a fiddle and there are a few thing to note. First your action added to the initial cycle will be removed when you hit your buttons. Here I have made the initial cycle do what you want and have added a button that you might use to get a 'snapshot' Note the selector to get only the currently visible image.
the meat:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
$('#testNum').html("Current slide " + opts.currSlide);
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img); }
});
// The button will work after you click fast,slow, or reverse.
// The reason for that is the .cycle function above replaces it
// as fast as you can see it.
$("#btnCopy").on("click",function(){
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img);
});
i cant seem to add a pause on mouse hover to this slide show code , any help will be greatly appreciated
<script type="text/javascript">
$(function() {
var jmpressOpts = {
animation : { transitionDuration : '1.8s' }
};
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
dots : false,
arrows : false,
interval : 8000
}));
});
</script>
I don't know how jmslideshow works but try setting the interval to a variable of your choice and then change that variable to a really large number on .mouseover and back to 8000 on .mouseout
or maybe you can do the same thing with autoplay, set it to false on .mouseover, true on .mouseout
Please check my answer here: https://stackoverflow.com/a/19830616/2519089
You will need to modify the jquery.jmslideshow.js file and include the following lines within the _loadEvents method:
//custom hover handler
this.$jmsWrapper.on( 'mouseenter', function( e ) {
_self._stopSlideshow();
});
this.$jmsWrapper.on( 'mouseleave', function( e ) {
_self.options.autoplay = true;
_self._startSlideshow();
});
Hope this helps!
I'm using the Booklet plugin. How can I verify that the last page was displayed? I've tried something like
$(document).ready(function(){
($('.b-page:last').is(':visible'))?alert("da"):alert("nu");
});
but it doesn't seem to work.
With jQuery, you can detect when you are on the last page or back cover. The code below will detect either case on load, on resize and also on change (a blooklet event). Good luck!
$(function () {
//Create a function to do stuff...
function dostuff() {
console.log('I am on the last page...');
}
//Create a function that sets a new class, and get the width value of it's element
function mclasswidth() {
//add the new class
$("div[title='End']").parent('div').parent().prev().addClass('dropit');
//Get the width value
var mwidth = $('.dropit').width();
//The big secret...if width is 0, you know you are on the last page / back cover
if (mwidth =='0') {
dostuff();
}
}
//In addition to running booklet code below, you can also use the "change" event to detect if you are on last page (look below)
$("#mybook").booklet({
width: 500,
height: 500,
speed: 250,
covers: true,
closed: true,
startingPage: 4, //(optional)
pageNumbers: false,
pagePadding: 0,
autoCenter: true,
arrows: false,
change: function (event, data) {
//Detect the width value of your new class on page "change", which will do stuff if you are on the last page.
mclasswidth();
//Also on page change, if you already know the index number to the last page, you can do stuff directly
if (data.index == "4") {
dostuff();
}
}
});
//Detect the width value of your new class on "load" and on "resize", which will do stuff if you are on the last page.
$(window).on("resize", function () {
mclasswidth();
}).resize();
});