Cmotion Image Gallery - adding image label?

[outfitez]

1) Script Title: Cmotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem:
Love this script, and many thanks to the author.

I am trying to add a label or title to my images, that will appear below the image as it scrolls. The brute force approach is to create a new image including the original image and the label, but I would love the label to be more easily editable. Any ideas?

[jscheuer1]

What you can do is to replace the nobr tag with a table (modified from the demo):

<table id="trueContainer"><tr><td><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br>Description</td><a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a><br>Description <td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>Description</td></tr></table>

Be sure to look at the entire above code segment. There is only one row, this is important. Each image and link is enclosed in a cell (<td>) with an added <br> tag followed by the word 'Description' which you can replace with your text for each image. The height of the gallery will need to be increased by about 30 (over what it would be for just images) to accommodate the descriptions (from gllerystyle.css):

#motioncontainer {
/*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 130px; /* Set to gallery height */
}

Additional style may be added to the stylesheet to control the presentation in the table cells, ex:

#motioncontainer td {
text-align:center;
vertical-align:top;
font-size:85%;
font-family:sans-serif;
}

[outfitez]

Many thanks, John.

I found that I needed to remove "white-space: nowrap" from the motiongallery div to get the table to scroll (at least on FF) - a tip I got from another thread, and which I hope isn't messing anything else up.

I also discovered that all worked fine even with a multi-row table, which is how I actually implemented it since that is how my original, non-scrollable, gallery was set up.

The result, doing exactly what I wanted, is at www.outfitez.com/profiles.html (hope I've kept your copyright notices properly so I don't get my knuckles rapped!)

Thanks again for a great script.

[jscheuer1]

Well, I wasn't envisioning exactly what you did but, the credit on the page looks fine. The layout looks well thought out and renders well in FF, Opera and IE. Not too much more you can ask for. Oh, about the white-space:nowrap; thing - That was required when there was an image train held in a nobr tag, some browsers might not render it correctly as <nobr> has been deprecated (the tag was retained to accommodate older browsers that do not recognise white-space:nowrap;). Once a table is introduced/substituted, since the table itself will not wrap under any circumstances, all that is affected by white-space:nowrap; is content in the table. So, it becomes the designer's choice at that point whether to use it (white-space:nowrap;) or not.

[bobl61]

Is there a way to add something similar to an alt tag, so when the pic is hovered over, it would display a description

[jscheuer1]

Is there a way to add something similar to an alt tag, so when the pic is hovered over, it would display a description

The image tags in the HTML section of this script (from the demo page):

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamic . . .

are just ordinary image tags. You can add alt or title attributes to them just like with any image tag.

[bobl61]

The image tags in the HTML section of this script (from the demo page):

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamic . . .

are just ordinary image tags. You can add alt or title attributes to them just like with any image tag.

Thanks for the reply. Would it be better (various browser comformant) to use title, or alt tags?

[jscheuer1]

Alt and title are not tags, they are valid attributes of some tags (the image tag included). For a tool tip sort of thing, the standard attribute to use is the title attribute, only IE will use the alt attribute in that manner, but if title is present, all browsers including IE will use that. However, all image tags are required to have alt attributes, so use both. The alt attribute may be empty, ex:

<img src="some.jpg" alt="" title="Some Image" border="0">