Question

How to advance caption with image...

Asked by: Gsx_Eclipse

I cannot seem to figure out how to get the caption to change with the image (100px x 100px). I have started a new array called destext. Can anyone provide me the code necessary to fix this? Here is the html:

=====================================================

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#slideshowContainer{
width: 100px;
height: 100px;
}

#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}

#backforthbuttons{
margin-top: 6px;
}

</style>

<script type="text/javascript">

// Index It Image Slideshow script- By JavaScriptKit.com
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Specify images for slideshow:
//["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["images/5.gif", ""]
numberslide[1]=["images/1.gif", ""]
numberslide[2]=["images/2.gif", ""]
numberslide[3]=["images/3.gif", ""]
numberslide[4]=["images/4.gif", ""]

var destext= new Array(5)
destext[0]="Caption 0";
destext[1]="Caption 1";
destext[2]="Caption 2";
destext[3]="Caption 3";
destext[4]="Caption 4";

var mylinktarget="" //specify optional link target
var mylinkcolor="navy" //specify default color of number links
var mylinkcolorSelected="red" //specify color of selected links

var imgborderwidth=0 //specify border of image slideshow

/////Stop customizing here////////////////

var preloadit=new Array()
for (i=0;i<numberslide.length;i++){
preloadit[i]=new Image()
preloadit[i].src=numberslide[i][0]
}

var currentindex=""

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}
function createnumbers(){
document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
for (i=1; i< numberslide.length; i++)
document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
document.write("<P><FORM name='form1'><TEXTAREA name='text1' wrap='virtual' rows='5' cols='20'>"+destext+"</TEXTAREA></FORM>")
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].style.color=mylinkcolor
}

function goforward(){
if (currentindex<numberslide.length-1)
changeslides(currentindex+1)
}

function goback(){
if (currentindex!=0)
changeslides(currentindex-1)
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="slideshowContainer">

<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial") //This call displays the first image
</script>
</div>

<div id="numberDiv">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

<div id="backforthbuttons"> </div>

</div>
</body>
</html>

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation
Collaborate with the world's top tech experts
Unlimited access to our exclusive solution database
Never be left without tech help again

Subscribe Now

Asked On: 2005-01-17 at 21:37:55ID21278177
Tags: javascript
Topic: JavaScript
Participating Experts: 2
Points: 125
Comments: 15

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Free Tech Articles

WARNING: 5 Reasons why you should NEVER fix a computer for free.
It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
SCCM OSD Basic troubleshooting
SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
Create a Win7 Gadget
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
Outlook continually prompting for username and password
There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
Backup Exchange 2010 Information Store using Windows Backup
There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

Avoiding Bugs in Microsoft Access
Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
Top 10 Best New Features in Visio 2010
Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
IT Consultant Business Secrets Revealed
Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
Disaster Recovery and Business Continuity
Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
Organize Your Visio Diagrams with Containers and Lists
Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
How to Us Objects, Properties, Events and Methods in Microsoft Access
Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Watch More

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

by: GwynforWebPosted on 2005-01-17 at 22:25:28ID: 13069840

I recommend stongly that in the future you do not get scripts from http://www.javascriptkit.com/ again. I've never seen such amazingly bad code in a long time. There are lots of slide show scripts around I'd search again.

by: prohacxPosted on 2005-01-17 at 23:59:10ID: 13070159

Hi there!

Indeed, strange code for such an issue...

Anyways, change your changeslides function to this:

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'" alt="' + destext[currentindex] + '">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

Have fun!

by: Gsx_EclipsePosted on 2005-01-18 at 06:09:38ID: 13072176

Changing the changeslides function didn't seem to do the trick. Where would you all recommend me getting scripts in the future? I am open to all suggestions. I am willing to scrap this code and start over, if needed.

Basically I liked this script because it allowed me to index the numbers (i.e. the user can select 1, 2, 3, 4 or 5, which loads an image of the same size...in the same location).

Ideally I would like to have a column of thumbnail images that the user can click on, and the enlarged versions would all load in the same place. Additionally I would like to have an accompanying caption for each enlarge image, possibly in an iFrame to save space.

I would really appreciate code, as I am really new to javascript.

Thanks for your time!

by: prohacxPosted on 2005-01-18 at 08:21:27ID: 13073664

What do you mean by caption then?
The change I did was to put an alt text on the image when you hover over it. Isn't that what you wanted?

Can you explain what you want then?

by: Gsx_EclipsePosted on 2005-01-18 at 09:37:00ID: 13074602

Instead I would like the text/caption to change after you click on the number, I prefer this over the hover method.

Thanks

by: prohacxPosted on 2005-01-19 at 00:08:26ID: 13080382

Here's a small script I wrote that shows thumbnails in a column on the left and when you click them, they are shown enlarged in a designated place.

If you have any questions, please ask!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Slide Show </title>
<META NAME="Author" CONTENT="Maarten De Ridder">
<META NAME="Keywords" CONTENT="slide, show, javascript, thumbnail, preview">
<META NAME="Description" CONTENT="Simple slide show, thumbnail previews.">

<script type="text/javascript">

// your images and captions go here

var myCaptions = new Array();
var myImages = new Array();
myImages[0] = new Image();
myImages[0].src = "images/1.gif";
myCaptions[0] = "Image 1";

myImages[1] = new Image();
myImages[1].src = "images/2.gif";
myCaptions[1] = "iMaGe 2";

myImages[2] = new Image();
myImages[2].src = "images/3.gif";
myCaptions[2] = "image 3";

function addThumbnails() {

      // This function adds the thumbnails to the left column of your screen

      // find the column
      var destinationObj = document.getElementById('thumbnails');

      // create a table
      var tableObj = document.createElement("TABLE");

      // put each image thumbnail on a new row in the table
      for (i=0; i<myImages.length; i++) {

            var rowObj = document.createElement("TR");
            var columnObj = document.createElement("TD");

            // we have to add click functionality on the images,
            // so we need to put each image inside a link element
            var linkObj = document.createElement("A");
            linkObj.onclick = "showImage(" + i + ")";

            var imgObj = myImages[i];
            imgObj.width = 50;
            imgObj.height = 50;

            // add all created content to the document structure
            linkObj.appendChild(imgObj);
            columnObj.appendChild(linkObj);
            rowObj.appendChild(columnObj);
            tableObj.appendChild(rowObj);

      }

      destinationObj.appendChild(tableObj);

      // this kind of refreshes the thumbnail column
      destinationObj.innerHTML = destinationObj.innerHTML;

}

function startSlides() {

      // start building the page.
      // you can add extra functionality here as well...

      addThumbnails();

}

function showImage(sequenceNumber) {

      // show the clicked image enlarged in the correct location

      var destinationObj = document.getElementById('fullimage');

      var imgObj = myImages[sequenceNumber];
      imgObj.width = 250;
      imgObj.height = 250;

      destinationObj.innerHTML = imgObj.outerHTML;

      // set the caption
      destinationObj = document.getElementById('caption');
      destinationObj.innerHTML = myCaptions[sequenceNumber];

}

</script>

</head>

<body onload="startSlides();">

      <table border="1" id="slideShow" cellspacing="0" cellpadding="0">

      <tr>

            <td id="thumbnails"></td>
            <td id="fullimage" width="250" height="250"> </td>

      </tr>
      <tr>
            <td id="caption" colspan="2" align="center" height="17"> </td>
      </tr>

      </table>

</body>
</html>

by: Gsx_EclipsePosted on 2005-01-19 at 09:40:05ID: 13085172

I really appreciate your taking the time to help me out. Your code is nice and clean. =)

This may seem like a simple question, but why can I not see the images in the table cells? I have created three 250px x 250px .gif images, placed them in a folder, and named them 1.gif, 2.gif, 3.gif respectively.

Also, I am a bit confused where to add new thumbnail images. Or does the code create a thumbnail from the 250px x 250px image?

How do I get the caption text to appear in the table cell?

Please write back when you have a free moment. This is great!

by: prohacxPosted on 2005-01-19 at 23:09:46ID: 13090612

Hi there again!

You're saying that you don't see the images? What do you see when you start this page?
Are you using Internet Explorer (6)? Do the images have enough on them, so that you still see the content when they are resized to 50x50, because the addThumbnails function resizes the images to 50x50. Maybe you can change this to 100x100 and see if you see something then?

The code does not really use thumbnail files (yet), it simply shows the real image, but then in a smaller size.

The captions are set in the myCaptions array. All images are stored in the myImages array.

Any other questions?

by: Gsx_EclipsePosted on 2005-01-24 at 09:15:47ID: 13123385

Seems to be working well now. However, I would rather use thumbnail files. How would we alter the code to make this happen?

Thanks for you help again!

by: prohacxPosted on 2005-01-25 at 00:21:10ID: 13129359

Hi there again!

You can use thumbnails by adding an extra array for them. Then in the addThumbnail function, show the tumbnails instead of the images, all other code remains the same:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Slide Show </title>
<META NAME="Author" CONTENT="Maarten De Ridder">
<META NAME="Keywords" CONTENT="slide, show, javascript, thumbnail, preview">
<META NAME="Description" CONTENT="Simple slide show, thumbnail previews.">

<script type="text/javascript">

// your images and captions go here

var myCaptions = new Array();
var myImages = new Array();
var myThumbnails = new Array();
myImages[0] = new Image();
myImages[0].src = "images/1.gif";
myThumbnails[0] = new Image();
myThumbnails[0].src = "images/1.thumbnail.gif";
myCaptions[0] = "Image 1";

myImages[1] = new Image();
myImages[1].src = "images/2.gif";
myThumbnails[1] = new Image();
myThumbnails[1].src = "images/2.thumbnail.gif";
myCaptions[1] = "iMaGe 2";

myImages[2] = new Image();
myImages[2].src = "images/3.gif";
myThumbnails[2] = new Image();
myThumbnails[2].src = "images/3.thumbnail.gif";
myCaptions[2] = "image 3";

function addThumbnails() {

      // This function adds the thumbnails to the left column of your screen

      // find the column
      var destinationObj = document.getElementById('thumbnails');

      // create a table
      var tableObj = document.createElement("TABLE");

      // put each image thumbnail on a new row in the table
      for (i=0; i<myImages.length; i++) {

            var rowObj = document.createElement("TR");
            var columnObj = document.createElement("TD");

            // we have to add click functionality on the images,
            // so we need to put each image inside a link element
            var linkObj = document.createElement("A");
            linkObj.onclick = "showImage(" + i + ")";

            var imgObj = myThumbnails[i];
            imgObj.width = 50;
            imgObj.height = 50;

            // add all created content to the document structure
            linkObj.appendChild(imgObj);
            columnObj.appendChild(linkObj);
            rowObj.appendChild(columnObj);
            tableObj.appendChild(rowObj);

      }

      destinationObj.appendChild(tableObj);

      // this kind of refreshes the thumbnail column
      destinationObj.innerHTML = destinationObj.innerHTML;

}

function startSlides() {

      // start building the page.
      // you can add extra functionality here as well...

      addThumbnails();

}

function showImage(sequenceNumber) {

      // show the clicked image enlarged in the correct location

      var destinationObj = document.getElementById('fullimage');

      var imgObj = myImages[sequenceNumber];
      imgObj.width = 250;
      imgObj.height = 250;

      destinationObj.innerHTML = imgObj.outerHTML;

      // set the caption
      destinationObj = document.getElementById('caption');
      destinationObj.innerHTML = myCaptions[sequenceNumber];

}

</script>

</head>

<body onload="startSlides();">

      <table border="1" id="slideShow" cellspacing="0" cellpadding="0">

      <tr>

            <td id="thumbnails"></td>
            <td id="fullimage" width="250" height="250"> </td>

      </tr>
      <tr>
            <td id="caption" colspan="2" align="center" height="17"> </td>
      </tr>

      </table>

</body>
</html>

Good luck!

by: Gsx_EclipsePosted on 2005-01-27 at 07:05:57ID: 13152910

Although your code has all of the features I am looking for, it lacks one thing for me: browser compatibility. It works great on IE 6 on PC, but if I use Safari or IE on the Mac platform I cannot see anything but the table border. I looked around and found something that maybe you can work with.

Have you seen the image clicks on ebay auctions? I grabbed the code from one, and it seems to be compatible with every browser I use. However, it is lacking the caption feature. Do you think you can customize this for me?

Also, is there anyway to insert the captions in an iFrame? I would like to use this to save valuable screen territory.

I'm not sure if we can do this or not, but I am willing to increase the points. Please take a look and let me know what you think. Can you make a lot of comments in the code for me as well?

Thanks again my friend!

=============================================

<html>
<head>
<title>Image Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
</script>

<script

src="http://include.ebaystatic.com/aw/pics/js/stores/store_customization.js"></script>

<script src="http://include.ebaystatic.com/js/e393/us/viewitem.js"></script>

<script>
</script>

<script language="JavaScript"></script>

<script>
</script>

</head>

<body onload="init();ebHelpContextualRebrand('buy');viOnload();" rightmargin="0"

topmargin="0" leftmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<table border="0" cellpadding="2" cellspacing="0">
<tr class="ebay">
<td><img src="http://pics.ebaystatic.com/aw/pics/s.gif" width="1" height="1"></td>
<td><img src="http://pics.ebaystatic.com/aw/pics/s.gif" width="20"

height="1"></td>
<td class="help"><b> Select a picture</b></td>
</tr>
<tr>
<td valign="center" align="center"><a name="ebayphotohosting"></a>
<table width="502" cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="100%"><img

src="http://i21.ebayimg.com/03/i/03/4b/bf/03_1_b.JPG" name="eBayBig" border="0"><br>
<img src="http://pics.ebaystatic.com/aw/pics/s.gif" width="1"

height="10"><br></td>
</tr>
</table></td>
<td rowspan="2" width="20"><img src="http://pics.ebaystatic.com/aw/pics/s.gif"

width="20" height="1"></td>
<td valign="top"><table border="0" cellpadding="5" cellspacing="0">
<tr>
<td align="center"><a

href="http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=3870254120&indexURL=0

#ebayphotohosting" onclick="update('http://i21.ebayimg.com/03/i/03/4b/bf/03_1_b.JPG',

0, false); return false;"><img src="http://i21.ebayimg.com/03/i/03/4b/bf/03_0.JPG"

color="#CCCCCC" border="1"></a></td>
<td align="center"><a

href="http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=3870254120&indexURL=1

#ebayphotohosting" onclick="update('http://i9.ebayimg.com/01/i/03/4a/d2/e5_1_b.JPG',

1, false); return false;"><img src="http://i9.ebayimg.com/01/i/03/4a/d2/e5_0.JPG"

color="#CCCCCC" border="1"></a></td>
</tr>
<tr>
<td align="center"><a

href="http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=3870254120&indexURL=2

#ebayphotohosting" onclick="update('http://i17.ebayimg.com/03/i/03/4b/cd/7d_1_b.JPG',

2, false); return false;"><img src="http://i17.ebayimg.com/03/i/03/4b/cd/7d_0.JPG"

color="#CCCCCC" border="1"></a></td>
<td align="center"><a

href="http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=3870254120&indexURL=3

#ebayphotohosting" onclick="update('http://i19.ebayimg.com/02/i/03/4c/34/8b_1_b.JPG',

3, false); return false;"><img src="http://i19.ebayimg.com/02/i/03/4c/34/8b_0.JPG"

color="#CCCCCC" border="1"></a></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

by: prohacxPosted on 2005-01-28 at 04:27:41ID: 13162476

Hi there again!

Indeed, my code is not browser compatible. I thought I mentioned that, but I did not.
It's not browser compatible because it uses DHTML document.createElement and Netscape/Opera do not know that statement.

So we can replace all such instances to code that all browsers do understand like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Slide Show </title>
<META NAME="Author" CONTENT="Maarten De Ridder">
<META NAME="Keywords" CONTENT="slide, show, javascript, thumbnail, preview">
<META NAME="Description" CONTENT="Simple slide show, thumbnail previews.">

<script type="text/javascript">

// your images and captions go here

var myCaptions = new Array();
var myImages = new Array();
var myThumbnails = new Array();
myImages[0] = new Image();
myImages[0].src = "images/1.gif";
myThumbnails[0] = new Image();
myThumbnails[0].src = "images/1.thumbnail.gif";
myCaptions[0] = "Image 1";

myImages[1] = new Image();
myImages[1].src = "images/2.gif";
myThumbnails[1] = new Image();
myThumbnails[1].src = "images/2.thumbnail.gif";
myCaptions[1] = "iMaGe 2";

myImages[2] = new Image();
myImages[2].src = "images/3.gif";
myThumbnails[2] = new Image();
myThumbnails[2].src = "images/3.thumbnail.gif";
myCaptions[2] = "image 3";

function addThumbnails() {

// This function adds the thumbnails to the left column of your screen

// find the column
var destinationObj = document.getElementById('thumbnails');

      var str = "";
// create a table
//var tableObj = document.createElement("TABLE");

      str+= "<table>";

// put each image thumbnail on a new row in the table
for (i=0; i<myImages.length; i++) {

            str += "<tr><td>";

            str += "<a href=\"#\" onclick=\"showImage(" + i + ");\"><img src=\"" + myThumbnails[i].src + "\" width=\"50\" height=\"50\"></a>";

            str += "</td></tr>";

}

      str+= "</table>";

// this kind of refreshes the thumbnail column
//destinationObj.innerHTML = destinationObj.innerHTML;

destinationObj.innerHTML = str;

}

function startSlides() {

// start building the page.
// you can add extra functionality here as well...

addThumbnails();

}

function showImage(sequenceNumber) {

// show the clicked image enlarged in the correct location

var destinationObj = document.getElementById('fullimage');

      var str = "";
      str += "<img src=\"" + myImages[sequenceNumber].src +"\">";
destinationObj.innerHTML = str;

// set the caption
destinationObj = document.getElementById('caption');
destinationObj.innerHTML = myCaptions[sequenceNumber];

}

</script>

</head>

<body onload="startSlides();">

<table border="1" id="slideShow" cellspacing="0" cellpadding="0">

<tr>

<td id="thumbnails"></td>
<td id="fullimage" width="250" height="250"> </td>

</tr>
<tr>
<td id="caption" colspan="2" align="center" height="17"> </td>
</tr>

</table>

</body>
</html>

This way, the code still looks the same and stays understandable (I hope ;-).
What I did was replace all dynamic adjustments to the document object (document.createElement, .appendChild, ...) by simple redefenitions of the innerHTML of a certain destination object. All browsers (IE, Netscape, Opera) understand that.

If you have any more questions, just ask!

Good luck!

by: Gsx_EclipsePosted on 2005-01-28 at 08:43:16ID: 13164923

Works great on every browser! I have a few questions though:

I like how the thumbnails line up in a single column, but after six of them I would like a new column to start.

Example:

Col 1 Col 2 Col 3
====== ====== ======
thumb 1 thumb 7 thumb 13
thumb 2 thumb 8 thumb 14
thumb 3 thumb 9 thumb 15...etc.
thumb 4 thumb 10
thumb 5 thumb 11
thumb 6 thumb 12

How can the code be altered to achieve this?

Can the caption beneath the images be inserted into an Iframe or a form text area? I would like the text to be within something that can be scrolled. You know what I mean?

Thanks for your time!

by: prohacxPosted on 2005-01-31 at 06:44:56ID: 13182855

Of course you can adjust the code to your needs!

Here's an example of what you could do:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Slide Show </title>
<META NAME="Author" CONTENT="Maarten De Ridder">
<META NAME="Keywords" CONTENT="slide, show, javascript, thumbnail, preview">
<META NAME="Description" CONTENT="Simple slide show, thumbnail previews.">

<style type="text/css">

#caption {
      display: block;
      position: relative;
      width:400px;
      height: 75px;
      overflow: scroll;
}

</style>

<script type="text/javascript">

// your images and captions go here

var numberOfThumbnailsPerColumn = 3;

var myCaptions = new Array();
var myImages = new Array();
var myThumbnails = new Array();
myImages[0] = new Image();
myImages[0].src = "images/1.gif";
myThumbnails[0] = new Image();
myThumbnails[0].src = "images/1.thumbnail.gif";
myCaptions[0] = "Image 1";

myImages[1] = new Image();
myImages[1].src = "images/2.gif";
myThumbnails[1] = new Image();
myThumbnails[1].src = "images/2.thumbnail.gif";
myCaptions[1] = "iMaGe 2";

myImages[2] = new Image();
myImages[2].src = "images/3.gif";
myThumbnails[2] = new Image();
myThumbnails[2].src = "images/3.thumbnail.gif";
myCaptions[2] = "image 3";

myImages[3] = new Image();
myImages[3].src = "images/4.gif";
myThumbnails[3] = new Image();
myThumbnails[3].src = "images/4.thumbnail.gif";
myCaptions[3] = "image 4<br>and some more caption text<br>is shown here";

myImages[4] = new Image();
myImages[4].src = "images/5.gif";
myThumbnails[4] = new Image();
myThumbnails[4].src = "images/5.thumbnail.gif";
myCaptions[4] = "<p>image 5</p><p>A little</p><p><b>scrolling</b></p><p>would come in handy</p><p><i>here</i></p>";

function addThumbnails() {

// This function adds the thumbnails to the left column of your screen

// find the column
var destinationObj = document.getElementById('thumbnails');

      var str = "";

      str+= "<table border=\"0\">"; // cellspacing=\"0\" cellpadding=\"0\" bordercolor=\"red\">";

// put each image thumbnail on a new row in the table
for (i=0; i<numberOfThumbnailsPerColumn; i++) {

            str += "<tr>";

            for (j=i; j<myImages.length; j+=numberOfThumbnailsPerColumn) {

                  str += "<td colspan=\"" + ((j+numberOfThumbnailsPerColumn) > myImages.length ? "2" : "1") + "\">";

                  str += "<a href=\"#\" onclick=\"showImage(" + j + ");\"><img src=\"" + myThumbnails[j].src + "\" width=\"50\" height=\"50\" border=\"0\"></a>";

                  str += "</td>";

            }

            str += "</tr>";

}

      str+= "</table>";

destinationObj.innerHTML = str;

}

function startSlides() {

// start building the page.
// you can add extra functionality here as well...

addThumbnails();

}

function showImage(sequenceNumber) {

// show the clicked image enlarged in the correct location

var destinationObj = document.getElementById('fullimage');

      var str = "";
      str += "<img src=\"" + myImages[sequenceNumber].src +"\">";
destinationObj.innerHTML = str;

// set the caption
destinationObj = document.getElementById('caption');
destinationObj.innerHTML = myCaptions[sequenceNumber];

}

</script>

</head>

<body onload="startSlides();">

<table border="1" id="slideShow" cellspacing="0" cellpadding="0">

<tr>

<td id="thumbnails"></td>
<td id="fullimage" width="250" height="250"> </td>

</tr>


</table>
<div id="caption"> </div>
</body>
</html>

As you can see I removed the row for the caption text and replaced it by a scrollable div.
I do not suggest to use iframes, as they are not the way to go...

Also, there's a variable on top of the code numberOfThumbnailsPerColumn that you can change according to your needs.

by: Gsx_EclipsePosted on 2005-02-03 at 05:19:29ID: 13213709

Thank you so much for all your help!

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

For individual users
Instant access to solutions
Ask your tech questions
Start your 30-day Free Trial

Business Accounts

Perfect for organizations
Multiple users
Save over 36%
Create a Business Account

Answer for Membership

Earn free access
Showcase your knowledge
No credit card required
Sign Up to Answer

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...

Question

How to advance caption with image...

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

javascript

JavaScript

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press