Comments (18)
I noticed on the Nivo Slider home page, there are these commands:
$('#slider').data('nivo:vars').stop = true; //Stop the Slider
$('#slider').data('nivo:vars').stop = false; //Start the Slider
I wonder if this would work for a pause button? I don't know how to do that.
from nivo-slider-jquery.
I've spent a couple days trying to build a pause button and I've come up with something that works for me. It adds a pause button to the end of the controlnav. All it takes is a little additional scripting, and one modification to the nivo.slider.js file.
In the nivo.slider.js file, around line 175, replace
$('.nivo-controlNav a', slider).live('click', function() {
with
$('.nivo-controlNav .nivo-control', slider).live('click', function() {
add the following code inside your $(window).load(function())
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b' + cl + '\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
document.getElementsByClassName('nivo-controlNav')[0].innerHTML += '<a id="nivo-pause">||</a>';
document.getElementById('nivo-pause').onclick = function() {
$('#slider').data('nivo:vars').stop = !$('#slider').data('nivo:vars').stop;
if ($('#nivo-pause').css('color') == "rgb(185, 185, 185)" || $('#nivo-pause').css('color') == "#b9b9b9" || $('#nivo-pause').css('color') == "rgb(185,185,185)")
$('#nivo-pause').css('color', "rgb(102, 102, 102)")
else
$('#nivo-pause').css('color', "rgb(185, 185, 185)")
};
from nivo-slider-jquery.
I realize that this is an old post, but for anyone who might find this (like I did) I made an enhancement based off of the work that wham12 did. Namely, I removed the getElementsByClassName function and used jQuery's native method. I also set some variables for the Stop/Pause and Play indicators. They can be text, symbols or even images. I also added a class to the stopped state so that the CSS can be changed for the Stop and Play states.
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); var nivoStop = "||", nivoPlay = ">"; $('#slider .nivo-controlNav').html($('#slider .nivo-controlNav').html()+''+nivoStop+''); $('#slider .nivo-stop').click(function(){ if($('#slider').data('nivo:vars').stop){ $('#slider .nivo-stop').html(nivoStop).removeClass('stopped'); }else{ $('#slider .nivo-stop').html(nivoPlay).addClass('stopped'); } $('#slider').data('nivo:vars').stop = !$('#slider').data('nivo:vars').stop; }); }); </script><style type="text/css"> .nivo-stop{ cursor:pointer; } </style></pre>
from nivo-slider-jquery.
4culture commented on August 23, 2024
i have been wondering the same thing. there is also this:
slideshowEnd: function(){} //Triggers after all slides have been shown
but i can't figure out how to make it work.
from nivo-slider-jquery.
4culture commented on August 23, 2024
Where exactly would you put it?
This is what I have$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
pauseTime:5000,
directionNav:true, //Next and Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
manualAdvance:false, //Force manual transitions
captionOpacity:1, //Universal caption opacity
});
});from nivo-slider-jquery.
wham12 commented on August 23, 2024
put it after you close the .nivoSlider command, but still inside the $(window).load(function())
don't forget to make the modification to the nivo.slider.js file as well, or when you click the pause button it will also jump back to the first slide
as a side note....you've got an extra comma after "captionOpacity:1" that could give you some grief
from nivo-slider-jquery.
4culture commented on August 23, 2024
Thanks!! It works great in everything but IE (and opera). Have you had that problem also?
Link:
http://4culture.org/test/index.htmfrom nivo-slider-jquery.
wham12 commented on August 23, 2024
I had a problem with mine not working in IE while I was using version 1.3.2 but upgrading to 1.4.1 solved that issue. I have not tested mine in opera.
from nivo-slider-jquery.
4culture commented on August 23, 2024
Working fine now - I realized it was the link issue in ie and opera that was causing it not to work. Thanks so much!
from nivo-slider-jquery.
wham12 commented on August 23, 2024
Glad you got it working!!
I might recommend you take a look at the part of my code where it changes the CSS color attribute when you click. If you check for the color you're using (Hex: #AF3910, RGB: 175,57,16) you can change the pause button to a different color so the user knows that the slider is paused.
That bit of my code is a little messy because IE works it differently than FF/Chrome do, so if you need some help figuring out how to modify it, don't be afraid to ask.from nivo-slider-jquery.
4culture commented on August 23, 2024
good suggestion. I am using a png defined like this:
#nivo-pause {
position:absolute;
left:60px;
cursor:pointer;
display:block;
width:12px;
height:12px;
background:url(../graphics/pause.png) no-repeat;
text-indent:-9999px;
border:0;
z-index:99;
}but I'm guessing that is not the way to go?
from nivo-slider-jquery.
wham12 commented on August 23, 2024
Ah, I see what you did. That would work fine...you could just change my code to add/remove a class that changes the background to a different image that has a new color.
from nivo-slider-jquery.
4culture commented on August 23, 2024
I'm pretty new to javascript - how/where would you do that?
from nivo-slider-jquery.
wham12 commented on August 23, 2024
sent you a PM - lets get all this knocked out off of the board
from nivo-slider-jquery.
dylanvalade commented on August 23, 2024
I have a modified version of the code here that does not require messing with the Nivo Slider source js at all.
<!-- Place this link anywhere in your page as the pause button and then switch the class from pause to play if you want to change the style of the button to show the current state --> <a id="playPauseButton" href="#play" class="pause">Play or Pause</a>end of page
$(window).load(function() { var $slider = $('#slider'); $("#playPauseButton").click(function (e) { e.preventDefault(); var $button = $(this); if ($button.hasClass("pause")) { $slider.data('nivoslider').stop(); $button.toggleClass("pause", false); } else { $slider.data('nivoslider').start(); $button.toggleClass("pause", true); } }); $('#slider').nivoSlider( /* init args */ ); });
from nivo-slider-jquery.
Firestorm-Graphics commented on August 23, 2024
old issue but someone may find helpfull, thanks dylanvalade for the heads up but only a pause class is appended, i amended the script to append both play & pause class's which makes for easier styling etc
jQuery(window).load(function() {// play/pause button
var$slider = $ ('#slider');
$("#playPauseButton").click(function (e) {
e.preventDefault();
var$button = $ (this);
if ($button.hasClass("pause")) {
$slider.data('nivoslider').stop();
$button.toggleClass("pause", false);
$button.toggleClass("play", true);
}
else {
$slider.addClass("play");
$slider.data('nivoslider').start();
$button.toggleClass("pause", true);
$button.toggleClass("play", false);
}
});// play/pause button // END //from nivo-slider-jquery.
ForgeableSum commented on August 23, 2024
Important to note that flickapix's code is incomplete. You need to init the slider. Here is the full code adding the "play" and "pause" css class at the appropriate times:
jQuery(window).load(function() {
var$slider = $ ('#slider');
$("#playPauseButton").click(function (e) {
e.preventDefault();
var$button = $ (this);
if ($button.hasClass("pause")) {
$slider.data('nivoslider').stop();
$button.toggleClass("pause", false);
$button.toggleClass("play", true);
}
else {
$slider.data('nivoslider').start();
$button.toggleClass("pause", true);
$button.toggleClass("play", false);
}
});
$('#slider').nivoSlider( /* init args */ );
});from nivo-slider-jquery.
goodwebsites commented on August 23, 2024
Just what I was looking for. Question though.
What would the tweak be if you want the link to start the slideshow?
So slideshow is stopped on slide 1 and when clicked our magic link it starts (and clicking the link again will pause the show)
answered my own question...
Changed class to 'play' of the link.
Added 'afterLoad: function(){$('#sliderShow').data('nivo:vars').stop= true;}' to the init argsfrom nivo-slider-jquery.
Related Issues (20)
- Error "Uncaught TypeError: Cannot read property '0' of undefined"
- "Nivo Slider requires jQuery 1.7 or greater" while jQuery is 1.10.2 ...
- Effect missing
- How to get current version of Nivo-Slider jQuery pluging to position controls over slides?
- rotating animated gifs
- nivo slider throws error HOT 1
- Background CSS to change per slide
- bower support HOT 1
- Images of different height HOT 2
- Vertical black lines appearing on some transitions HOT 3
- jquery 3.1.0 error HOT 5
- nivoslider and https ssl issue HOT 4
- How to use lazy-load image?
- provide slider information in trigger function
- Unable to adjust image center using CSS HOT 1
- nivo slider in reactjs?
- Missing Alt Attributes For Images Nivo-Slider Automatically Adds HOT 6
- pauseTime and effect not taken into account - jquery 3.2.1
- jquery conflict when I using jquery-2.1.1.min.js
- Is this project dead? HOT 5
Recommend Projects
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
Recommend Topics
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web
Some thing interesting about web. New door for the world.
server
A server is a program made to process requests and deliver data to clients.
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization
Some thing interesting about visualization, use data art
Game
Some thing interesting about game, make everyone happy.
Recommend Org
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
from nivo-slider-jquery.