4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)
  • Q:
    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
    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]

4 berichten aan het bekijken - 1 tot 4 (van in totaal 4)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.