Having trouble with jquery cycle not sure what am i doing wrong.
Without delay it all works fine, but I would love to delay the first image
because the slider starts before the first image or two are loaded
I would love to stop it for few seconds and then start.
ANY IDEAS ?
$(document).ready(function() { $('#slideshow').cycle({
fx: 'fade',
speed: '1000',
timeout:'4000',
delay: '1000'
});
});
if you wanted a 4 second interval between transitions but you want the first transition to occur 2 seconds after the page loads then you would do this:
$('#slideshow').cycle({
fx: 'fade',
speed: '1000',
timeout:'4000',
delay: -2000
});
The 'delay' option gives you an opportunity to change the transition interval of the very first slide. When the timeout value of the first slide is calculated, the value of the delay option (default is 0) is added to the timeout value
Hope it helps
Related
How to dynamically change tooltip delay in Bootstrap?
I have div with buttons, when i .mouseenter() on it first time i want a delay of 500ms, but after 500ms i want to change it to 100ms. On .mouseleave() i want it back to 500ms.
Its working but with tooltip('destroy') its killing already shown tooltip.
How to figure it out?
here is fiddle:
https://jsfiddle.net/0nep4tk3/2/
var $btns = $(".buttons").find('button');
$(".buttons").on('mouseenter', function(e){
setTimeout(function(){
setTooltips({show:100, hide:10});
},750);
}).on('mouseleave',function(){
setTooltips({show:500, hide:100});
})
function setTooltips(opt){
$btns.tooltip('destroy');
$btns.tooltip({
trigger:'hover',
delay:{show:opt.show, hide:opt.hide},
container:'body',
});
}
A nice example you can find on https://webflow.com/, in their editor they have very nice tooltips for buttons.
EDIT
I edited fiddle for better ms and feeling what i mean.
So, this is what i got:
I hover BTN1 and after 500ms tooltip will appear but also after 1s i change all tooltip ms ( so i need use 'destroy') and then tooltip for BTN1 which one should still be visible (beouse my mouse is over BTN1 ) will disapear. I want him to stay after tooltips ms change.
I just want to get nice tooltip feeling for buttons.
Without having to destroy and recreate tooltips every time you can edit the delay option.
If i have understood correctly your request, this should do:
var $btns = $(".buttons").find('button');
$btns.tooltip({
trigger:'hover',
delay: {show: 500, hide: 500},
container:'body',
});
$(".buttons").on('mouseenter', function(e){
setTimeout(function(){
console.log("100");
setTooltips({show: 100, hide: 100});
},500);
}).on('mouseleave',function(e){
console.log("500");
setTooltips({show: 500, hide: 500});
});
function setTooltips(opt){
$btns.each(function(){
$(this).data('bs.tooltip').options.delay=opt;
console.log($btns.data('bs.tooltip').options.delay);
})
}
I have left the console.log for testing purposes, you can safely remove them if you don't need them anymore.
If the values i put are incorrect you can easily tweak them but the main logic should be this:
At first, delay is 500ms.
When you mouseenter on the div the delay will be set to 100ms after 500ms
when you mouseover the delay will be back to 500ms
In my single HTML page I am using two image sliders. For both the sliders I have given the same delay time.
When the page is loaded both image slides are syncing but when the image slides run for few minutes they are not syncing correctly.
Is it possible to make them sync?
$(document).ready(function() {
$('#slide').cycle({
fx: 'fade',
delay: -6000,
});
$('#content_slide').cycle({
fx: 'fade',
delay: -6000,
});
});
I need help with the coding on the site I'm trying to build.
www.diveintodesign.co.uk/ChrisMcCrone/index.html
The coding is from http://jquery.malsup.com/cycle/
The large image in the middle is the slideshow, the two bars on the left and right of it are the next and previous buttons which work fine but it won't run automatically for some reason, the javascript includes timeout:0
Does anyone know what I've done wrong?
Cheers,
Lise
I think setting timeout to the amount of time to hold on a slide is what you want.
$('.slideshow').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 3000, // 3 seconds
next: '#next',
prev: '#prev'
});
I looked up your code and the jQuery Cycle Plugin website. I think you have to change the timeout to a number which is higher than 0, else it doesn't automatically slide.
$('.slideshow').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 5000, // time in milliseconds you want
next: '#next',
prev: '#prev'
});
Also, I want to say that it's really not clear that the black bars on the side are the buttons to control the slideshow.
I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE.
The link is here http://www.secureshop.gr/POOL/citycars/website
Thank you in advance.
Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.
As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: '', // Prev directionNav text
nextText: '', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
</body>
On my homepage the banner transitions are going very quickly- I would like to know how to slow them down. Here is the page: www.sevenbarfoundation.org
It is written in CSS
Under:
http://assets.sevenbarfoundation.org/wp-content/themes/sevenbar/js/slideshow.js
You need to change the values in line 14 and 15 to have the effect you want (timeout and speed):
$('#slideshow').cycle({
timeout: 1000,
speed: 1000,
pager: '#slideshow_controls_num'
});