I'd like to pause the Nivo slider for 5 seconds before it runs but show the first image. So I'll need to add some code in the property afterLoad I believe.
I've tried setTimout before running the slider code be it doesn't give the result I'd like.
This is my current code:
$(window).load(function(){
$('#slider').nivoSlider({
animSpeed: 500,
pauseTime: 4000,
effect : 'boxRain',
directionNav : false,
controlNav: false,
afterLoad: function(){
//$('#slider').data('nivoslider').stop();
}
});
});
I don't know your exact code but you could use .stop() on it and after 5 seconds you start it again.
$('#slider').data('nivoslider').stop(); //Stop the Slider
$('#slider').data('nivoslider').delay(5000).start(); //Start the Slider
Correction (because delay didn't work in that case):
$(window).load(function(){
$('#slider').nivoSlider({
animSpeed: 500,
pauseTime: 4000,
effect : 'boxRain',
directionNav : false,
controlNav: false,
});
jQuery('#slider').data('nivoslider').stop();
setTimeout("jQuery(#slider').data('nivoslider').start()",5000);
});
Related
I'm trying to use this Animate on scroll library:
https://michalsnik.github.io/aos/
on my Sharepoint(2016) page
and it doesn't work when scrolling.
and I don't know what needs to be changed.
Binding it to their custom ‘master’ div, instead of the body/window will work:
<script>
jQuery('#s4-workspace').bind( 'scroll', function(){
AOS.init({
duration: 1000
});
});
// AOS.init({
// offset: 200,
// duration: 600,
// easing: 'ease-in-sine',
// delay: 100,
// });
</script>
I am using infinite-scroll.js, video.js, and masonry.js. The first page loads correctly (i.e., images of videos load within video players within "pintrest-style" boxes. However, as the user scrolls down, only the pintrest-style" boxes load with empty video players (i.e., no images and videos do not play). I think I should be reinitializing video.js somehow, but I can't figure out how to do so properly with multiple videos. My js code is below. How would I get the newly loaded boxes to load video players?
$container.infinitescroll({
debug: false,
//extraScrollPx: 40,
bufferPx: 40,
navSelector : '#navigation', // selector for the paged navigation
nextSelector : '#navigation a', // selector for the NEXT link (to page 2)
itemSelector : '.masonry_object', // selector for all items you'll retrieve
loading: {
finishedMsg: null,
img: "img/loader.gif",
msg: null,
msgText: " ",
speed: 'fast',
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({display:"none"},{ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$container.masonry( 'appended', $newElems, true );
$newElems.show().delay(1000).animate({ opacity: 1 },1000);
$newElems.videojs("example_video_number", { "controls": true, "autoplay": false, "preload": "auto" });
});
}
);
I'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.
I'm trying to get the jquery masonry script to reshuffle after I animate the size of a div. I had seen some examples but I just can't seem to get it working. I tried:
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
I also tried
<script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: true
});
});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$("#container|).masonry("reload");
});
</script>
For some reason I can't get the reshuffle to happen. Here is the page it's not working with http://www.klossal.com/masonry.html
thanks in advance for any help on this.
Masonry("reload") should work but you have an error in your line $("#container|).masonry("reload");. Your need a closing normal quote and not a pipe like so: $("#container").masonry("reload"); I also don't think I don't think you need isotope to shuffle. The easist would be to reorder the tiles before feeding it to masonry. Simple look at my site (http://www.phpdevpad.de). When you click on the menu on the left and try different combinations the tiles are shuffled.
If you want the shuffle method, you need to use Isotope; Masonry's bigger sister. See the github discussion here.
I'm using jQuery Cycle Plugin for an image slider. What I'm looking for is something like this:
image1.jpg >> fadeout >> hold on the blank frame for a second >> fadein image2.jpg >> repeat
How can I control the delay before the next fade animation starts, or the interval between 2 slide transitions?
I mean when the first slide image completely fades out, I need it to pause for 1 or 2 seconds before the second image actually begins its fadein animation.
** I need to get this to work during when I'm changing slides with the pager or next/prev links.
I've tried turning sync: 0 to stop simultaneous fading transition between 2 slides but not quite what I was looking for.
Any advice will be appreciated, thanks.
You can define a custom transition which fades out the current slide, waits, and then fades in the next slide.
For a more complete example than below, see: http://jsfiddle.net/QGRv9/1/
$.fn.cycle.transitions.fadeOutWaitFadeIn = function($cont, $slides, opts) {
opts.fxFn = function(curr, next, opts, after) {
$(curr).fadeOut(opts.fadeSpeed, function() {
$(next).delay(opts.delayBetweenFades).fadeIn(opts.fadeSpeed, function() {
after();
});
});
};
};
$(function() {
$('#slideshow').cycle({
fx: 'fadeOutWaitFadeIn',
fadeSpeed: 500,
delayBetweenFades: 2000,
//The timeout value includes the fade speed (twice) and delay between fades.
//e.g. For a 3000 ms timeout, use 3000 + 500 * 2 + 2000 = 6000.
timeout: 6000
});
});
Note that I'm probably doing something wrong here. The timeout shouldn't have to include the other values. There's also one small issue: The first slide gets shown for 6000ms instead of 3000ms.
One way is to insert a blank slide after each image. You can then use the timeoutFn option to give a different timeout value depending on whether the slide is an image or a blank slide.
Here's an example where the images are displayed for 5 seconds and blank slides are displayed for 2 seconds:
http://jsfiddle.net/7jJe3/
<div id="slideshow">
<img src="image1.jpg" />
<span></span>
<img src="image2.jpg" />
<span></span>
<img src="image3.jpg" />
<span></span>
</div>
function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
var imgtime = 5000;
var blanktime = 2000;
if ($(currSlideElement).is('img'))
return imgtime;
return blanktime;
};
$(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 400,
timeoutFn: timeoutfn
});
});