Solved

javascript image slideshow

Posted on 2009-04-08
5
225 Views
Last Modified: 2012-06-27
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
Comment
Question by:Shiva_Kumar
  • 2
5 Comments
 
LVL 13

Expert Comment

by:numberkruncher
Comment Utility
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
 

Author Comment

by:Shiva_Kumar
Comment Utility
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
 
LVL 13

Accepted Solution

by:
numberkruncher earned 500 total points
Comment Utility
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
 
LVL 16

Expert Comment

by:CWS (haripriya)
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now