[Bijdrager cokie]

Script header faden

Hoi,

weet iemand een goed script om je header van je website te laten faden. Dus de headerfoto langzaam laten overfaden naar andere foto’s.
Heb veel gegoogled, maar niet gevonden wat ik zocht.

Deze tutorial hieronder vind je overal, maar dit is enkel wanneer je met je muis over de afbeelding gaat.
http://swedishfika.com/2008/03/04/creating-a-fading-header/

Ik wil gewoon via een eenvoudige Jquery script foto’s in elkaar laten faden zodat ik die kan gebruiken voor een website. Heb ook andere oude javascripts gevonden, maar megalang.

Cheers

[Bijdrager J-R0eN]

Bekijk dit topic eens. Dit kan je heel simpel zelf maken dan met je headers natuurlijk….

http://forum.onemorething.nl/viewtopic.php?t=128949

[Bijdrager EL Mystica]

http://www.glonet.be/ rip it …

[Bijdrager nipro]

Simpeler dan dit lijkt me vrijwel onmogelijk ;).. (een beetje van jezelf en een beetje van jQuery, deze moet je dus even downloaden).

Je HTML:
[code:1:3ecb701424]
<div id="slideshow">
<img src="blah.jpg" alt="" class="active" />
<img src="aap.jpg" alt="" />
<img src="kip.jpg" alt="" />
</div>
[/code:1:3ecb701424]

[code:1:3ecb701424]
// simpele slideshow over een container met images (met fade)
// (c) 2008 – Bjorn Post <bjornpost.com>
function slideSwitch() {
var $active = $(’#slideshow img.active’);
var $next = $active.next();

if ($active.length == 0) {
$active = $(’#slideshow img:last’);
}

if ($(’#slideshow img’).length > 1) {
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’);
});
}
}

// auto faden na 5 sec.
$(function() {
setInterval( "slideSwitch()", 5000 );
});
[/code:1:3ecb701424]

Succes.

-edit-: ohja, een likje CSS doet ook nog wonderen:
[code:1:3ecb701424]
/* breedte en hoogte naar wens aanpassen */
#slideshow {
width: 250px;
height: 379px;
}

#slideshow img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow img.active {
z-index:10;
opacity:1.0;
}

#slideshow img.last-active {
z-index:9;
}
[/code:1:3ecb701424]