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
Related
I would like to implement a simple left and right arrow navigation into an image slider. Below is what I have already tried. Where do I have to place the function if I click on an arrow. Inside or outside the changeImg function? Thanks in advance
<div class="slider">
<span id="left"><</span>
<img class="sliderImg" name="slide">
<span id="right">></span>
</div>
var i = 0;
var images = [];
var time = 4000;
images[0] = "img/image1.png";
images[1] = "img/image2.png";
images[2] = "img/image3.png";
function changeImg() {
document.slide.src = images[i];
if (i < images.length - 1) {
i++;
}
document.querySelector("#left").addEventListener("click", function()
{
i--;
});
else {
i = 0;
}
setTimeout("changeImg()", time);
}
You can do something like that :
HTML
<div class="container">
<div id="slideshow">
<img alt="slideshow" src="img/image1.png" id="imgClickAndChange" onclick="changeImage()" />
</div>
<span id="left-arrow">left</span>
<span id="right-arrow">right</span>
</div>
Javascript:
var imgs = ["img/image2.png", "img/image3.png", "img/image4.png"];
function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}
var left=document.getElementById('left-arrow');
var right=document.getElementById('right-arrow');
left.onclick = function(e) {
changeImage(-1) //left <- show Prev image
}
right.onclick = function(e) {
changeImage() //left <- show Prev image
}
Use your correct path to your images
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 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
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 two js function as given below the function nextPage is working fine but the previousPage function when called the event webkitAnimationEnd doesn't work as desired.
Link to jsfiddle:link to jsfiddle.
var currentPage = 0;
function nextPage()
{
alert(currentPage);
var pages = document.getElementsByClassName('pages');
pages[currentPage].className = "pages pageanim";
pages[currentPage].addEventListener('webkitAnimationEnd', function(){
this.style.left = '0%';
this.style.zIndex = currentPage;
currentPage = currentPage+1;
}, false);
}
function previousPage()
{
//alert(currentPage);
var pages = document.getElementsByClassName('pages pageanim');
pages[0].className = "pages revpageanim";
pages[0].addEventListener('webkitAnimationEnd', function(){
this.style.left = '49%';
this.style.zIndex = currentPage+1;
currentPage = currentPage-1;
}, false);
}
Here is my html:
<body onLoad="applyZindex();">
<!-- Add your site or application content here -->
<header><button class="nav left" onClick="previousPage();"><<prev</button>
<h3 class="left">Previewer (TM)
</h3><button class="nav right" onClick="nextPage();">
next>></button></header>
<section style=" position:relative;">
<img src="img/1.jpg" alt="page1" title="page1" class="pages" />
<img src="img/2.jpg" alt="page2" title="page2" class="pages" />
<img src="img/3.jpg" alt="page1" title="page1" class="pages" />
<img src="img/4.jpg" alt="page2" title="page2" class="pages" />
</section>
<footer></footer>
</body>
http://jsfiddle.net/K8Tuy/28/ here you go;
So, you need to removeEventListener on every click if you also addEventListener on every click;
Generally, its not a good idea to addEventListener on every click. It should be initialize once and your logic should be inside the buttons.
var currentPage = 0;
function nextPage()
{
var pages = document.getElementsByClassName('pages');
pages[currentPage].className = "pages pageanim";
pages[currentPage].addEventListener('webkitAnimationEnd', function(){
this.style.left = '0%';
this.style.zIndex = currentPage;
pages[currentPage].className = "pages";
currentPage = currentPage+1;
this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
console.log(currentPage);
}, false);
}
function previousPage()
{
//alert(currentPage);
var pages = document.getElementsByClassName('pages');
page = pages[currentPage-1];
page.className = "pages revpageanim";
page.addEventListener('webkitAnimationEnd', function(){
currentPage = currentPage-1;
this.style.left = '49%';
page.style.zIndex = pages.length-currentPage;
page.className = "pages";
this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
console.log(currentPage);
}, false);
}
EDIT:
http://jsfiddle.net/K8Tuy/35/ -- arguments.callee replaced with "function name"