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/
Related
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>
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
CSS
#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}
JQUERY
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
I have the above jquery slider all i need to have a timeout function which the slider slides automatically and as well i need it to slide according to the prev and next buttons. Thanks in advance
DEMO
To use the timeout function goes like this:
setInterval(function(){
//your function you want to timeout
},1000);
1000 milliseconds = 1 second
Try this
Use clearInterval(tId) to stop and run() to start again if you want to pause when next/prev is clicked
Live Demo
var tId;
function run() {
tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$sp = $(".sp");
$('.nav').click(function () {
var which = this.id.replace("button-", ""),
next = which == "next",
$oldActive = $('.active');
if (next) {
if ($oldActive.index()==$sp.length-1) {
$('.sp').first().addClass('active');
} else {
$oldActive.next().addClass('active');
}
} else {
if ($oldActive.index()==0) {
$('.sp').last().addClass('active');
} else {
$oldActive.prev().addClass('active');
}
}
$oldActive.removeClass('active');
$('.sp').fadeOut();
$('.active').fadeIn();
});
run();
});
I think you would want to use the jQuery.animate function. Something like this:
$(".active").animate({width:"100%"},750);
This assumes that the sliders have a default css property of width: 0%.
Edit: new fiddle http://jsfiddle.net/qnM3x/1/
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);
});
The gallery loads the first image, then switches to the next, switches back to the first, then to the thrird, and so on. Not sure why, this is happening.
jQuery:
var hoverhome = 'url("images/HomePreview.png")';
var hoverhome = 'url("images/HomePreview.png")';
var hoverhome = 'url("images/HomePreview.png")';
var hovergallery = 'url("images/GalleryPreview.png")';
var hoverhome = 'url("images/HomePreview.png")';
var empty = 'none';
var success = 'SUCCESS!';
//home
jQuery('nav .home a').hover(function()
{
jQuery('.viewport').css('background-image', hoverhome);
});
jQuery('nav .home a').mouseout(function()
{
jQuery('.viewport').css('background-image', empty);
});
//about
jQuery('nav .home a').hover(function()
{
jQuery('.viewport').css('background-image', hoverhome);
});
jQuery('nav .home a').mouseout(function()
{
jQuery('.viewport').css('background-image', empty);
});
//services
jQuery('nav .home a').hover(function()
{
jQuery('.viewport').css('background-image', hoverhome);
});
jQuery('nav .home a').mouseout(function()
{
jQuery('.viewport').css('background-image', empty);
});
//gallery
jQuery('nav .gallery a').hover(function()
{
jQuery('.viewport').css('background-image', hovergallery);
});
jQuery('nav .home a').mouseout(function()
{
jQuery('.viewport').css('background-image', empty);
});
//contact us
jQuery('nav .home a').hover(function()
{
jQuery('.viewport').css('background-image', hoverhome);
});
jQuery('nav .home a').mouseout(function()
{
jQuery('.viewport').css('background-image', empty);
});
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
Call in the php file:
<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery('#slideshow > div:gt(0)').hide();
setInterval(function() {
jQuery('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
//--><!]]></script>
<div id="slideshow">
<div id="slideshow1">
I then call the images from css as the backgrounds of the various divs, they load fine. As a matter of fact, the entire slideshow works fine except for the glitch of showing the first slide multiple times during the first rotation, after the first rotation it works fine. The site is up at www.bingetech.com for further reference.
In your HTML of slideshow,
Only keep the 1st slideshow as display:block and rest of as display:none
<div style="display: block; opacity: 0;" id="slideshow5">
</div><div style="display: none;" id="slideshow1">
</div><div style="display: none;" id="slideshow2">
</div><div style="display: none;" id="slideshow3">
</div><div style="display: none" id="slideshow4">
</div>
I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help
You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.