Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

javascript image slideshow

Hi,

I am looking for a good javascript image slide show with fade effect with an ability to add text description about the image.

Thanks
0
Shiva_Kumar
Asked:
Shiva_Kumar
  • 2
1 Solution
 
numberkruncherCommented:
What about something like on this website; it does smooth fading and has a description below each image.

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm
0
 
Shiva_KumarAuthor Commented:
I like it..

Is it possible for you to show the same or some example which i can use wherein i can add the text next to the image (right to the image).

Thanks
0
 
numberkruncherCommented:
The presentation can be customized using CSS, the following is an example of how you can do this.

I have added some additional comments between *** and *** to help clarify things.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Demo Page</title>
 
		<style type="text/css">
			#show1 {
				border: solid 1px black;
				padding: 4px;
				width: 300px;
			}
			#show1 img {
				width: 300px;
			}
			#show1 #imgdsc0 {
				position: absolute;
				left: 330px;
				top: 100px;
			}
		</style>
 
		<script type="text/javascript">
			//If using image buttons as controls, Set image buttons' image preload here true
			//(use false for no preloading and for when using no image buttons as controls):
			var preload_ctrl_images=true;
 
// *** CHANGE THIS PART TO YOUR BUTTONS ***
			var previmg='left.gif';
			var stopimg='stop.gif';
			var playimg='play.gif';
			var nextimg='right.gif';
 
 // *** CHANGE THIS PART TO YOUR SLIDESHOW ***
			var slides= [
				["photo1.jpg", "Kissing Fools"],
				["photo2.jpg", "Seated Woman"],
				["photo3.jpg", "The Dog Lovers"]
			];
			//above slide show uses only the defaults
		</script>
 
		<script src="swissarmy.js" type="text/javascript">
			/***********************************************
			* Swiss Army Image slide show script  - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
			* This notice MUST stay intact for legal use
			* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
			***********************************************/
		</script>
	</head>
	<body>
		<h1>Demo Page</h1>
		<div id="show1_container">
			<div id="show1">
				<script type="text/javascript">
	// *** This is the part that actually creates the slide show. ***
					new inter_slide(slides)
				</script>
			</div>
		</div>
	</body>
</html>

Open in new window

0
 
CWS (haripriya)Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now