I am trying to fade in and out images with jquery but it's not working, I am missing something out.
see the script below:
var count = 1;
setInterval(function() {
count = (jQuery(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
//alert (count);
jQuery(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);
And here is the HTML code.
<div class="slideshow">
<div class="hover">
<a href="#">
<img src="#" />
<div class="mainportfo_title">title</div>
</a>
</div>
<div class="hover">
<a href="#">
<img src="#" />
<div class="mainportfo_title">title</div>
</a>
</div>
</div>
You can use JQuery get() and works on this code, taht is definitely improvable:
var i = 0;
setInterval(function() {
var target = $("img").get(i);
var next = $("img").get(++i);
$(target).fadeIn( "slow", function() {
$(target).fadeOut( "slow", function() {
$(next).fadeIn();
});
});
if(i >= $("img").size()) {
i = 0;
}
}, 3000);
do you want to do this?: jsfiddle demo
var count = 1;
setInterval(function() {
count = (jQuery(".slideshow:nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
jQuery(".slideshow:nth-child("+count+")").fadeIn();
}, 2000);
You have to target your .hover elements otherwise the .nth-child will select the wrong element.
var count = 1;
setInterval(function () {
count = ($(".slideshow .hover:nth-child(" + count + ")").fadeOut().next().length == 0) ? 1 : count + 1;
console.log(count);
$(".slideshow .hover:nth-child(" + count + ")").fadeIn();
}, 2000);
fiddle
Related
I have the following code to make a image slider with navigation dots, however when I click the dots they go mad, and don't obey the 4 second timer I have enabled.
When the page loads it works fine, and slides over the images perfectly. It is only when I click a nav dot, it moves to the next one super fast.
What am I doing wrong? On reflection, I may need to kill the timer when a nav dot is clicked, but how do I do that?
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if (numImgs == 2) {
var clicked = 0;
imgCount = numImgs - 2;
} else if (numImgs <= 1) {
$(".right-arrow").hide();
} else {
var clicked = 1;
imgCount = numImgs - 1;
}
if (numImgs > 2) {
for (var i = 0; i < numImgs; i++) {
$("ul").prepend('<li class="carousel-buttons" id="carousel' + addId + '"></li>');
var addId = addId - 1;
}
} else {
}
function goToSlide(slideNo) {
$(".carousel-buttons").removeClass("active");
$("#carousel" + slideNo).addClass("active");
clicked = parseInt(slideNo);
var adjustNumberforSlide = slideNo - 1;
$(".carousel-image-holder").animate({
"left": -(600 * adjustNumberforSlide) + "px"
});
console.log(clicked);
if (slideNo == 1) {
$(".left-arrow").hide();
$(".right-arrow").show();
} else if (slideNo == numImgs) {
$(".right-arrow").hide();
$(".left-arrow").show();
} else {
$(".right-arrow").show();
$(".left-arrow").show();
}
// Set timeout to go to next slide (4 seconds)
setTimeout(function() {
goToSlide((clicked < numImgs ? clicked + 1 : 1));
}, 4000);
}
$(".carousel-buttons").click(function() {
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
goToSlide(findTheNumb);
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function() {
if (clicked < imgCount) {
$(".carousel-image-holder").animate({
"left": "-=600px"
});
console.log(clicked);
} else {
$(".carousel-image-holder").animate({
"left": "-=600px"
});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked + 1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel" + clicked).addClass("active");
});
$(".left-arrow").click(function() {
if (clicked > 2) {
$(".carousel-image-holder").animate({
"left": "+=600px"
});
console.log(clicked);
} else {
$(".carousel-image-holder").animate({
"left": "+=600px"
});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked - 1;
$(".carousel-buttons").removeClass("active");
$("#carousel" + clicked).addClass("active");
});
// Start timer
goToSlide(clicked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="ducation/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
<img src="education/make-a-booking.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul>
</ul>
</div>
When you click a button, you need to clear the old loop before starting your new one. Use clearTimeout for this, and store the id in a global variable.
// Set timeout to go to next slide (4 seconds)
window.currentLoop = setTimeout(function() { // save the timer
goToSlide((clicked < numImgs ? clicked + 1 : 1));
}, 4000);
}
$(".carousel-buttons").click(function() {
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
clearTimeout(window.currentLoop); // clear the old timer
goToSlide(findTheNumb);
});
https://jsfiddle.net/cqn67z1n/
I need to show three images one by one with using javascript setinterval function can you please any one help me.
Bellow is my html code.
<div class="imageHolder">
<img src="http://lorempixel.com/400/200/sports/" style="display:none;" class="image1" border="0" />
<img src="http://lorempixel.com/400/200/sports/1" style="display:none;" class="image2" border="0" />
<img src="http://lorempixel.com/400/200/" style="display:none;" class="image3" border="0" />
</div>
<head>
<script type="text/javascript">
function start() {
var images = document.querySelectorAll('.imageHolder img');
var images_count = images.length;
var image_index = false;
var delay = 3000; // 3 seconds delay
function animateImageHolder() {
if (false !== image_index) {
images[image_index].style = 'display:none';
image_index++;
image_index = (image_index < images_count ? image_index : 0);
} else {
image_index = 0;
}
images[image_index].style = 'display:inline';
}
animateImageHolder();
setInterval(animateImageHolder, delay);
}
</script>
</head>
<body onload="start()">
<!-- ... -->
This question is pretty much like "do my job for me" but you are honest in your english.
You did not say how long each image should be visible so I set it to 3 seconds (interval = 3000).
I recommend you to set the style attribute of the first image to be style="display:block" and the rest to style="display:none".
function slider(element) {
var next_image = 0
, interval = 3000
, images = Array.prototype.filter.call(element.children, function(child) {
return child.tagName === "IMG";
})
;
setInterval(function() {
images.forEach(function(image, i) {
image.style.display = i === next_image ? "block" : "none";
})
next_image = (next_image + 1) % images.length;
}, interval);
}
slider(document.querySelector("div.imageHolder"))
I have a small problem with a small jQuery script that my slide images. The script itself works very well, its purpose being to scroll through the images indeed "fade", a classic.
The problem is that if I want to use it for another block on the page, well it no longer works properly .. The problem is certainly located at the id, but can not make it work.
Here is the script:
function slider() {
function animate_slider(){
$('.slider #'+shown).animate({
opacity:0 // fade out
},1000);
$('.slider #'+next_slide).animate({
opacity:1.0 // fade in
},1000);
//console.log(shown, next_slide);
shown = next_slide;
}
function choose_next() {
next_slide = (shown == sc)? 1:shown+1;
animate_slider();
}
$('.slider #1').css({opacity:1}); //show 1st image
var shown = 1;
var next_slide;
var sc = $('.slider img').length; // total images
var iv = setInterval(choose_next,3500);
$('.slider_nav').hover(function(){
clearInterval(iv); // stop animation
}, function() {
iv = setInterval(choose_next,3500); // resume animation
});
$('.slider_nav span').click(function(e){
var n = e.target.getAttribute('class');
//console.log(e.target.outerHTML, n);
if (n=='prev') {
next_slide = (shown == 1)? sc:shown-1;
} else if(n=='next') {
next_slide = (shown == sc)? 1:shown+1;
} else {
return;
}
animate_slider();
});
}
window.onload = slider;
Any idea ? Thank you all :)
i am not sure of what u want to do, but if you want reusibality :
EDIT : i ve modified assuming that your 2 slides are independant
this is a quick solution, as mentioned #David Barker, it would be more clean to do a jQuery plugin
JS :
var sliderTop = "#slider.top";
var sliderBottom = "#slider.bottom";
function slider(el) {
function animate_slider(el){
$(el + shown).animate({
opacity:0 // fade out
},1000);
$(el + next_slide).animate({
opacity:1.0 // fade in
},1000);
//console.log(shown, next_slide);
shown = next_slide;
}
function choose_next(el) {
next_slide = (shown == sc)? 1:shown+1;
animate_slider(e);
}
$(el + ' #1').css({opacity:1}); //show 1st image
var shown = 1;
var next_slide;
var sc = $(el + ' img').length; // total images
var iv = setInterval(choose_next,3500);
$(el + '_nav').hover(function(){
clearInterval(iv); // stop animation
}, function() {
iv = setInterval(choose_next,3500); // resume animation
});
$(el + '_nav span').click(function(e){
var n = e.target.getAttribute('class');
//console.log(e.target.outerHTML, n);
if (n=='prev') {
next_slide = (shown == 1)? sc:shown-1;
} else if(n=='next') {
next_slide = (shown == sc)? 1:shown+1;
} else {
return;
}
animate_slider(el);
});
}
window.onload = function() {
slider(sliderTop);
slider(sliderBottom);
}
HTML :
<div id="slider" class="top">
<h2>Nos partenaires</h2>
<img id="1" src="" alt="">
<img id="2" src="" alt="">
<img id="3" src="" alt="">
</div>
<div class="slider_nav">
<span class="prev">Précédent</span><!--
--><span class="next">Suivant</span>
</div>
<div id="slider" class="bottom">
<h2>Nos partenaires</h2>
<img id="1" src="" alt="">
<img id="2" src="" alt="">
<img id="3" src="" alt="">
</div>
<div class="slider_nav">
<span class="prev">Précédent</span><!--
--><span class="next">Suivant</span>
</div>
I have a progress bar with Bootstrap, CSS and jQuery. Everything works fine but I would like this bar disappears when all images are loaded.
For this I tried to put in the following script a:
if(n==100) { $('#fabbar').hide(); }
Here's the script :
$(function () {
var n = 0,
$imgs = $('img.gallery'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
if(n==100) { $('#fabbar').hide(); }
});
and into my body, I have :
<div class="progress progress-info progress-striped active">
<div class="bar" id='fabbar' style="width: 20%">0%</div>
</div>
<img class="gallery" src="images/1.jpg">
<img class="gallery" src="images/2.jpg" >
<img class="gallery" src="images/3.jpg" >
<img class="gallery" src="images/4.jpg" >
...
Use WaitforImages jquery plugin for that:
https://github.com/alexanderdickson/waitForImages
Here is how it should work:
$(function () {
var n = 0,
$imgs = $('img'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$imgs.load(function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
});
});
$('body').waitForImages(function() {
// All descendant images have loaded, now hide the progress bar.
$(".bar_wrap").fadeOut();
});
Check out the demo((click the run button))
http://jsfiddle.net/yphM4/24/
Should work:
$(function () {
var n = 0,
$imgs = $('img.gallery'),
val = 100 / $imgs.length,
$bar = $('#fabbar');
$("img").one('load', function () {
n = n + val;
// for displaying purposes
$bar.width(n + '%').text(n + '%');
n === 100?$('#fabbar').hide():false;
}).each(function () {
if (this.complete) $(this).load();
});
});
I am trying to create a silde show without using any plugin.
I need a timer which reducing its height and changes with the image and timer having a clicking event also. https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html.
This is the one which I am trying.
HTML
<div id="panel">
<img id="imageSlide" alt="" src="" width="250px" />
</div>
<div id="timer">
<a href="">
<span class="reduce_height">1</span>
</a>
<a href="">
<span class="reduce_height">2</span>
</a>
<a href="">
<span class="reduce_height">3</span>
</a>
<a href="">
<span class="reduce_height">4</span>
</a>
</div>
Jquery
$(function() {
var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];
var maximages = imgs.length; //No of Images
$(function() {
setInterval(Slider, 3000);
});
var prevIndex = 0;
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
var shuffleIndex = Math.floor(Math.random() * maximages);
if (prevIndex == shuffleIndex) {
while (prevIndex != shuffleIndex) {
shuffleIndex = Math.floor(Math.random() * maximages);
}
}
$("#panel").fadeIn("slow").css('background', '#000');
$(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
});
}
});
$(function() {
var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];
var maximages = imgs.length; //No of Images
Slider();
setInterval(Slider, 3000);
var prevIndex = 0, prevPrevIndex = 0;
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
do {
shuffleIndex = Math.floor(Math.random() * maximages);
} while(prevIndex == shuffleIndex || prevPrevIndex == shuffleIndex)
prevPrevIndex = prevIndex;
prevIndex = shuffleIndex;
$("#panel").fadeIn("slow").css('background', '#000');
$(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
});
}
});
I put the prevPrevIndex so that images were repeated less often )) you can remove it