I am trying to create a slideshow for my website but i have no idea
how to make the array restart. I tried putting a for loop in the function but the page only shows the last image every time it reloads. here is the code:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);
Sounds like you want i to wrap back around to 0 after it hits the last image in images. Try replacing i with i % images.length like so:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i % images.length];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);
I think you are missing a component to your function. I think you need to add to your function:
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
Here is code that I have used to make my own slideshow:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
The function tells it where to start and that at the end, it needs to go back to the first. This is then incorporated in the setInternal at the end.
Here is the css if you want it:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
And the html:
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>
Related
Today while creating a slider i stuck in the middle of code that how can i fadein and fadeout the image one by one in jquery. Code i tried so far:-
<head>
<style>
#slideshow{
list-style: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
position:fixed;
}
ul{
list-style-type:none;
}
ul li{
display:inline;
width: 100%;
height: 100%;
position:absolute;
background-size:cover;
background-position:center center;
}
ul li img{
display:none;
}
</style>
</head>
<body>
<ul id="slideshow">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
<script>
window.onload=init;
function init(){
items=$('ul').children('li');
i=0;
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')').fadeOut(1000,function(){
for(i=0;i<items.length;i++){
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')');
}
});
}
</script>
</body>
After showing first image it automatically goes to last image without displaying the second image.
Please help me to rectify this problem.
Here's how you can do it: JSFiddle
function init(){
$("#slideshow li").each(function(index){
this.style.backgroundImage = "url('" + this.children[0].src + "')";
if( index != 0)
this.style.display = "none";
});
setTimeout(changeImage, 4000);
}
function changeImage(){
$curr = $("#slideshow .active");
$next = $("#slideshow .active").next();
if($next[0] === undefined)
$next = $("#slideshow li").eq(0);
$curr.fadeOut(1000, function(){
$next.fadeIn(1000, function(){
$curr.removeClass("active");
$next.addClass("active");
setTimeout(changeImage, 4000); //change image every 4 seconds
});
});
}
$(document).ready(init);
You need to use the setInterval() and something must tell you what is the current img. Assume that all image is hidden exept for the active one.
<ul id="slideshow">
<li class="active"><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
function ShowNext()
{
var current = $("#slideshow .active");
$(current).removeClass("active");
$(current).fadeOut(1000, function () {
$(current).next().fadeIn(1000);
$(current).next().addClass("active");
});
}
setInterval(function() {
ShowNext();
}, 4000);
Code not tested but this is how you should do it. Also you need to do something when you reach the end of the slider but i'm sure you can handle that.
I'd suggest having a single element instead of 3.
Also, use a recursive function to swap the image every 2 seconds.
Lastly note the javascript has been moved inside the <head> element where it should be.
Update: This has been tested and works great - had to fix a few bugs - here's the updated code:
<html>
<head>
<style><!-- Your Styles --></style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">
var imgNum = 1;
$(document).ready(function() {
doSlideshow();
});
function doSlideshow() {
$('#image1').fadeOut(400, function() {
$('#image1').attr('src', 'img/' + imgNum + '.jpg');
$('#image1').fadeIn(400);
imgNum++;
if (imgNum == 4) { imgNum = 1; }
setTimeout('doSlideshow()', 2000);
});
}
</script>
</head>
<body>
<ul id="slideshow">
<li><img id="image1" src="" /></li>
</ul>
</body>
</html>
There are definitely more than one way to do this.
I answered a similar question here:
>> Adding fade to simple slideshow with Javascript <<
However, to answer YOUR question directly, consider the following:
>> WORKING JS FIDDLE <<
// create arbitrary namespace
window.slideshow = {
slides: null,
currentSlide: null,
nextSlide: null,
interval: 3000,
timer: null,
init: function() {
console.log('init slideshow');
this.slides = $('#slideshow img');
this.planNextSlide(1);
},
planNextSlide: function(timeoutInterval) {
console.log('next slide (' + timeoutInterval + ')');
this.timer = setTimeout(this.transitionSlide, timeoutInterval);
},
transitionSlide: function() {
console.log('transition slide (' + (slideshow.currentSlide != null) + ')');
if (slideshow.currentSlide != null) {
// fade out old slide first
slideshow.slides.eq(slideshow.currentSlide).fadeOut('fast', function() {
slideshow.nextSlide = slideshow.currentSlide + 1;
if (slideshow.nextSlide == slideshow.slides.size()) {
slideshow.nextSlide = 0;
}
slideshow.currentSlide = null;
slideshow.transitionSlide();
});
}
else {
// fade in new slide
slideshow.nextSlide = slideshow.nextSlide == null ? 0 : slideshow.nextSlide;
slideshow.slides.eq(slideshow.nextSlide).fadeIn('fast', function() {
slideshow.currentSlide = slideshow.nextSlide;
slideshow.planNextSlide(slideshow.interval);
});
}
}
};
// initial state initializer
slideshow.init();
I am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});
Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});
I have a slideshow on this Wordpress website www.2eenheid.de. I am trying to figure out how to make the images fade so it fades between the images instead of fading into a white bg color first and then into an image. Any clue how to do this in my situation, see below?
The javascript:
<script type="text/javascript">
$(function () {
var imgsrc = '';
imgsrc = $('.pikachoose').css('background-image');
$('ul.slideshow-menu').find('a').hover(function () {
var newImg = $(this).attr('src');
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': 'url(' + newImg + ')'
}).fadeTo('fast', 1);
});
}, function () {
$('.pikachoose').stop().fadeOut('slow', function () {
$(this).css({
'background-image': imgsrc
}).fadeTo('fast', 1);
});
});
});
</script>
HTML:
<div id="slideshow-main">
<ul class="slideshow-menu">
<li class=""><a title="Support / Beheer" href="/supportenbeheer" src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></li>
<li class="current_page_item"><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></li>
<li class=""><img src="http://www.2eenheid.de/wp-content/themes/2eenheid/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></li>
</ul>
</div>
</div>
Try setting the opacity for the class pikachoose to 1
.pikachoose
{
opacity:1 !important;
}
do this with z-index.
CSS
#slideshow-main { position: relative }
.slideshow-main img {z-index: 1; position: absolute; }
.slideshow-main img.active {z-index: 3; }
JQUERY
function cycleImages(){
var $active = $('#slideshow .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#slideshow img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(function(){
setInterval('cycleImages()', 10000);
});
HTML
<div id="slider">
<img src="http://www.alleywatch.com/wp-content/uploads/2013/04/brand.jpeg" id="image1" />
<img src="http://www.ereleases.com/prfuel/wp-content/uploads/2012/07/brand_stamp.jpg" id="image2" />
<img src="http://www.submitedge.com/blog/wp-content/uploads/2013/04/Creating-a-Positive-Brand-Image.jpg" id="image3" />
</div>
<div id="slider-back"></div>
CSS
#slider {
height:296px;
overflow:hidden;
width:822px;
position:absolute;
left:50%;
margin-left:-411px;
top:87px;
z-index:20;
}
#slider-back {
position:absolute;
left:50%;
margin-left:-411px;
height:296px;
z-index:29;
top:87px;
width:822px;
background: url("/test/backimage.png") no-repeat scroll 0px 0px transparent;
jquery
$(document).ready(function () {
var imgs = $('#slider > a > img');
var z = 1;
var previousImageId = "";
$(imgs[0]).show();
function loop(ev) {
imgs.delay(5000).slideUp('slow').eq(z).slideDown(500, function () {
check = z != imgs.length - 1 ? z++ : z = 0;
loop();
});
}
loop();
});
I tried in fiddle
http://jsfiddle.net/ee9R6/
I want to output like
http://www.lulupu.com/ (Right side our manufactures modlue vertical slider)
I would go a slightly different route
http://jsfiddle.net/ee9R6/4/
Instead of sliding all of the elements up, which ends up queuing the slide down, you can slide up the current img and slide down the next image at the same time.
function loop(ev) {
$(imgs[z]).slideUp("slow");
check = z != imgs.length - 1 ? z++ : z = 0;
$(imgs[z]).slideDown("slow");
setTimeout(loop, 5000);
}
I created a jquery image gallery.
It work almost perfectly, all the images changing with fade out/in.
The issue is: after the last image the first image appear without fade effect.
HTML Code:
<div id="gallery-holder">
<img src="images/main-galery1.jpg" class="active" >
<img src="images/main-galery2.jpg" >
<img src="images/main-galery3.jpg" >
</div>
CSS code:
#gallery-holder{
position:relative;
top:0px;
width:980px;
height:300px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#gallery-holder img{
position:absolute;
top:0;
left:0;
z-index:8;
}
#gallery-holder .active{
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
Java Script
$(document).ready(function(){
slideSwitch();
});
function slideSwitch() {
var $active = $('#gallery-holder IMG.active');
if ( $active.length == 0 ) $active = $('#gallery-holder IMG:last');
var $next = $active.next().length ? $active.next()
: $('#gallery-holder IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
any advice?
I tried to replace:
$active.removeClass('active last-active');
with this:
$('#gallery-holder IMG.active').removeClass('active last-active');
No luck
Let's simplify things. No opacity/css, no active classes, just simple jQuery fades:
(function slideSwitch() {
var $gallery = $('#gallery-holder'),
$active = $gallery.find('img:visible'),
$next = $active.next().length ? $active.next() : $gallery.find('img').first();
setTimeout(function() {
$active.fadeOut('fast');
$next.fadeIn('fast', slideSwitch);
}, 2000);
}());
Demo: http://jsfiddle.net/AlienWebguy/npTD9/