gli Posted June 19, 2008 Share Posted June 19, 2008 Hi! I have slideshow with three boxes, and i want that picture shows in its place with fading effect. I'am really begginer to javascript only 2days, but i read many fading ways but i tried alot to add these codes in my slideshow, its not working. I know that you'll not code for me but you can give me right ways because i really dont know how to combine it. Thanks! Here's my JavaScript: var myPix = new Array("images/0.gif","images/one.gif","images/two.gif","images/three.gif","images/four.gif"); function goRight() { myPix.push(myPix.shift()); imgLeft.src = myPix[0]; imgMid.src = myPix[1]; imgRight.src = myPix[2]; } function goLeft() { myPix.unshift(myPix.pop()); imgLeft.src = myPix[0]; imgMid.src = myPix[1]; imgRight.src = myPix[2]; } html: <html> <head> <link rel="stylesheet" rev="stylesheet" href="styles.css" /> <script type="text/javascript" src="skript.js"></script> </head> <body> <a id="linkleft" href="#" onClick="goLeft()">«</a> <img id="imgLeft" src="images/0.gif"> <img id="imgMid" class="fade" src="images/one.gif"> <img id="imgRight" src="images/two.gif"> <a id="linkright" href="#" onClick="goRight() ">»</a> </body> </html> css: body { background-color: white; } img { border-width: 0; } img#imgleft { width: 85px; height: 80px; margin-left: 60px; } img#imgright { margin-top: 10px; width: 100px; height: 80px; } img#imgmid { width: 200px; height: 100px; border: 0 none; } div#line { border: 3px solid black; width: 610px; height: 3px; } a#linkleft { margin-left: 10px; font-size: 30px; } a#linkright { margin-left: 70px; font-size: 30px; } Quote Link to comment Share on other sites More sharing options...
lemmin Posted June 19, 2008 Share Posted June 19, 2008 Here is the MSDN documentation for the fade filter transition: http://msdn.microsoft.com/en-us/library/ms532990(VS.85).aspx Click the "Show me" button to see source for something similar to what you are trying to do. Because it is fading between two images, both images need to be loaded when you do the fade effect. This means that when you just set the src property (such as you are doing), you are removing the previous picture from that location and it cannot be faded from. in order to get this effect, you will need to actually have two images for each location; one image for the current picture and one for the next picture. You also need a container to display the effect over the two images so you will need the images inside of a div or something similar. This is how it is done in the MSDN "Show me" example, so you can go off of that. Quote Link to comment Share on other sites More sharing options...
gli Posted June 20, 2008 Author Share Posted June 20, 2008 ok. thanks, i'll try Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.