Solved

javascript image slideshow

Posted on 2009-04-08
5
226 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
ID: 24102628
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
ID: 24102733
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
ID: 24102995
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)
ID: 37169584
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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.
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…

911 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

21 Experts available now in Live!

Get 1:1 Help Now