I've used one image slider. The HTML and jQuery code for it is as follows :
HTML code :
<div class="leaderboard">
<ul id="demo1">
<li><img src="img/Slid1.png" alt="Lorem Ipsum"></li>
<li><img src="img/Slid2.png" alt="Lorem Ipsum"></li>
<li><img src="img/slid3.png" alt="Lorem Ipsum"></li>
</ul>
</div>
jQuery code :
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: 3000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
The necessary jQuery and CSS files have been already included.
This image slider is working perfect for me. But now I want to set some value in seconds (say for example 5 seconds. This is a variable value, it can be other than 5 seconds too.) for which each image from this slider appears. In other words I want to display each image for 5 seconds, as soon as 5 seconds are completed the next image should come.
How should I pass this value of 5 seconds to the above jQuery slider function and use this value into a function such that each image from slider will appear for 5 seconds?
Thanks for spending some of your valuable time in understanding my issue. If you need any more information regarding this issue please let me know.
Any kind of hep would be highly appreciated. Waiting for your precious replies.
for the slide to last 5s change the value
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: 5000,// changed from 3000(3s)
auto: true,
preload: 'visible'
});
you can get more information here http://slippry.com/settings/
Edit 2
you will need to do something like this
JS Fiddle
Related
Using a jquery plugin for Youtube backgrounds (https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
I am trying to pause all the background videos with a single pause button, not sure for which reason it only pauses the first video, no matter the length of divs with background video.
I set up a jsfiddle explaining what I am trying to achieve.
The codes are as follow:
$('.vid').each(function() {
var vid = $(this).data('video');
$(this).YTPlayer({
videoURL: vid,
stopMovieOnBlur: false,
mute: true,
ratio: 'auto',
quality: 'default',
loop: true,
showYTLogo: false,
showControls: false,
containment: 'self'
});
});
$('.pauseit').on('click', function() {
$('.vid').YTPPause()
});
Thanks for any help on this.
Converting comment to answer.
Make sure the button is a button: type="button"
use .each again to pause the videos:
Like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() { $(this).YTPPause(); });
});
https://jsfiddle.net/mplungjan/swnj2bcg/
Take a look here. I modified the jsfiddle:
update
Chnage it like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() {
$( this ).YTPPause();
})
});
I am having issues with dynamically updating content with bxslider. I am able to successfully load the content by entering the li items in HTML. When I attempt to append or replace the ul html with new li content from my database, it fails to reload the slider. Here is the important markups from my script. Is there any reason why I get no errors in the console.log and no images or slides?
var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function(){
$('.bx-viewport').css({'height':'100% !important'});}}
$(function(){
slider = $('.bxslider').bxSlider(sliderConfig);
});
function updateSlider(data){
$('.bxslider').html(data);
slider.reloadSlider(sliderConfig);
}
I found the answer, thank you for your suggestions.
The issue lies with the CSS. Once i reloaded the slider, the CSS was setting to 0 on the .bx-wrapper, .bx-viewport, .bxslider and .bxslider li elements. Once i reset them to the necessary heights it resolved my issue.
$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);
Try like this, means call the updateSlider('<li><img src=\''+url+'\'></li>'); only after you are having data using any delayed function like as ajax. I have put on document ready but you need to run after successful ajax request:
var url = 'image/picture.jpg';
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function () {
$('.bx-viewport').css({'height': '100% !important'});
}
}
function updateSlider(data) {
$('.bxslider').html(data);
}
$(function () {
slider = $('.bxslider').bxSlider(sliderConfig);
//update slider on load or after any ajax call success
updateSlider('<li><img src=\'' + url + '\'></li>');
});
$('document').on('click', 'a', function () {
slider.reloadSlider(sliderConfig);
});
I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.
Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});
I am currently using the following code to initialize a lazy initialization version of Bootstrap tooltip. After the first hover everything works fine in regards to the delay, but on the initial hover it shows right away. I know this is because of the $(this).tooltip('show'); method, but I dont know how to use the delay and show at the same time. I have to use the $(this).tooltip('show'); because once hovered the element doesnt show the tooltip unless I move out and back in.
$(element).on('hover', '.item', function () {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
$(this).tooltip('show');
}
}
});
Updated Answer
$(element).on('mouseenter', '.item', function (e) {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this)
.addClass('tooltip-init')
.tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
.trigger(e.type);
}
});
try use trigger
try the following code
$(this).tooltip({
title: matchup.Title,
html: true,
trigger: 'hover',
delay: delay: { show: 2000, hide: 3000 }
}).trigger('hover');
I found Holmes answer using delay to work, but not reliably. When moving through a series of items, the hover seemed to stop showing. With the help of another stackoverflow answer leading to this jsfiddle by Sherbrow, I simplified the code and got it working in this jsfiddle. Simplified code below:
var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
var show = function(n) {
enterTimeout = setTimeout(function(n) {
var isHovered = n.is(":hover");
if (isHovered) n.tooltip('show');
enterTimeout = false;
}, 750);
};
if(enterTimeout) clearTimeout(enterTimeout);
show( $(this) );
});
$('[rel="tooltip"]').on('mouseout click',function() {
$(this).tooltip('hide');
});
I am struggling to customize jquery cycle plugin. What I want is when the slider reaches last slide it will stop sliding to first slide again.This is working fine.
But the problem is when I am on first slide and then click the third slide then it's not ending there rather it goes back to first slide.
My jquery code is here:
jQuery(document).ready(function($) {
$('.slider1 ul.horizontal').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
pauseOnPagerHover: true,
width: "100%",
easeOut: 'easeOutBack',
cleartypeNoBg: true,
pager: 'ul.pager',
autostop: 2,
autostopCount:3,
startingSlide: 0,
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return '<li></li>';
}
});
function onAfter()
{
if ($('.slider_content').css('display') == 'block')
{
if ($('li#lastslide').css('display') == 'block') {
$('.slider1 ul.horizontal').cycle('pause');
$('.controlbutton').stop().fadeIn(500);
}
else
{
if($('.question_slide').css('right') != '0px')
{
$('.controlbutton').fadeOut(100);
}
}
}
}
});
I think there should be some pagination click event.I have checked the plugin options reference page but can't under stand how to tell the plugin that this is the last slide and don't go back to the first slide.
Any idea please. Thanks in advance.