transparent bg

transparent bg

Innleggav srb » lør 19.06.2010 13:10

halloen

har en enkel visning i jquary her, men trenger litt hjelp i visning av bildene da de ikke er like store og de har transparent bg...dermed vises ikke bare det aktive fotoet, med de andre også. Hvordan skjule de andre?
Jeg har forsøkt å justere både i visibility og opacity...

Kode: Merk alt
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
   
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $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 );
});
</script>




her er css:
Kode: Merk alt
#slideshow {
    position:relative;
    height:350px;
}

#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;
    opacity:0.0;
}




html:
Kode: Merk alt
<div id="bgfoto">
<div id="slideshow">
    <img src="../utklblomst.png" alt="Slideshow Image 1" class="active" />
    <img src="../utklcamp2.png" alt="Slideshow Image 2" />
    <img src="../utklpool2.png" alt="Slideshow Image 3" />
    <img src="../utklsol.png" alt="Slideshow Image 4" />
</div></div>
medlem i 193 måneder
 

Re: transparent bg

Innleggav myPhone » søn 20.06.2010 13:22

Noe sånt?

$active.removeClass('active last-active');
$('#slideshow > IMG[class!=active]').hide();

eller så kan du bruke .css() eller animate()...

Scriptet er litt knotete og vet ikke hvor pent det blir med gjennomsiktige bilder når bakgrunnen plutselig forsvinner... tror du bør lage en cross-fading løsning istedet...

Brukerens avatar
medlem i 192 måneder
 

Re: transparent bg

Innleggav srb » søn 20.06.2010 14:56

takk for svar...bildene synes likefullt.
Hva er cross fading metoden?
medlem i 193 måneder
 

Re: transparent bg

Innleggav myPhone » søn 20.06.2010 17:39

at du har 2 elementer som ligger over hverandere hvor man fader ut den ene mens den andre fades inn...

hvis du legger ut prosjektet ditt på nettet kan jeg se på det og komme med forslag til løsning...

Brukerens avatar
medlem i 192 måneder
 


Returner til JavaScript



Hvem er i Forumene

Registrerte brukere: Google [Bot]



cron