CODEWITHSUNDEEP
javascripthtmlcssimagefade
nfarshchi
nfarshchi

Reputation: 1000

Moving through pictures by fading in HTML

I have some pictures and I want to navigate through them by clicking a button in my HTML. I need the effect to occur when the user clicks - I do not want to reload my page. Is there any Javascript or CSS that can help? I mean by pressing the "Next" button the next image can softly fade into the screen.

Upvotes: 1

Views: 282

Answers (2)

Chris Fletcher
Chris Fletcher

Reputation: 2387

Try jQuery Cycle. It has a bunch of available transitions and you can set it up with external previous/next controls.

Main plugin page: http://jquery.malsup.com/cycle/

Demo using previous/next links: http://jquery.malsup.com/cycle/int2.html

Upvotes: 0

Hamed Rajabi Varamini
Hamed Rajabi Varamini

Reputation: 3437

If you have a div like this:

<div id="yourDivId" >
    <img id="image_1_Id" class="" src="image_1.png" />
    <img id="image_2_Id" class="transparent" src="image_2.png" />
</div>

Insert this code to your css file: 

#yourDivId img.transparent 
{
    opacity:0;
}
#yourDivId img
{
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

And add this script to your javascript file or html head script:

function btnClicked(){
    document.getElementById("image_1_Id").className += "transparent";
    document.getElementById("image_2_Id").className = "";
}

Check this site http://css3.bradshawenterprises.com/cfimg/ for more examples!

Upvotes: 1

Related Questions