CODEWITHSUNDEEP
javascript
sukantk
sukantk

Reputation: 45

Fading effect using JavaScript

I am trying to make a image gallery similar to one in anntaylor site.

I am able to change the main image on mouse hovering by changing the source of image. Here is the code I applied:

 <div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
 <div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
 <div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
 <div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
 <div id="viewpoint"><img src="p1.png" name="mainimage" alt=""  /></div>

The CSS for the above code is :

#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}

The problem is on changing the image I am not able to get the fading effect. Please provide with a suitable JavaScript code to get the fading effect.

Upvotes: 1

Views: 109

Answers (3)

Tracker1
Tracker1

Reputation: 19334

Not going to go into details too far.. but doing a similar project and here's how I handled it...

<div id="slides">
    ...
    <img src="..." class="trans prev" data-id="image1" />
    <img src="..." class="trans shown current" data-id="image2" />
    <img src="..." class="trans next" data-id="image3" />
    ...
</div>

Then in CSS, I use CSS3 transitions, where the .trans class is opacity of 0, and a z-index of 100, where .trans.shown is set to opacity 1 with a z-index of 200.

Javascript is used to pull the current image, remove the "shown" class, and update the classes as appropriate... .prev and .next set the left position to -100% and 100% respectively.

I also only maintain the current, prev and next images in the stack.. other images are removed from the DOM... this keeps things pretty light/fast. Combined with the jquery.swipe plugin for tablet support. Would show the link to the final product, but will not be up until next month.

Upvotes: 2

Jim Deville
Jim Deville

Reputation: 10662

jQuery with the fadeIn (http://api.jquery.com/fadeIn/) and fadeOut methods (http://api.jquery.com/fadeOut/) should work for you

Upvotes: 2

Alexei Levenkov
Alexei Levenkov

Reputation: 100527

jQuery fadeIn - http://api.jquery.com/fadeIn/

Upvotes: 2

Related Questions