Title="captions" [Archive] - Dynamic Drive Forums

auntnini

07-24-2008, 10:13 PM

Hope to add captions for big images at http://jacquimorgan.tripod.com/hist/index.html#top)

Looking at http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm, the option to ”Specify whether TITLE attribute of thumbnail links should show as description under enlarged image” was appealing
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
But the <script> seemed overly complicated.

Would prefer a simpler approach -- for instance http://www.morgangaynin.com
<script language="JavaScript" type="text/javascript"> <!—
if (document.images) {
pic1 = new Image pic1.src = "images/pic_01.jpg" …
pic6 = new Image pic6.src = "images/pic_06.jpg"
holder = new Image holder.src = "images/holder.jpg"
}
else { document.pic1 = "" … document.pic6 = ""
document.holder = ""
}
</script>
Thumbnails in <BODY>
<img src="images/pic_01a.jpg" onMouseOver="document.holder.src=pic1.src">
<img src="images/pic_06a.jpg" onMouseOver="document.holder.src=pic6.src">

I’m trying to figure out how to add TITLES by adapting something like
<script type="text/javascript" >
/*http://www.alistapart.com/articles/imagegallery JavaScript Image Gallery by Jeremy Keith changes images and title */
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('MGholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
<BODY> link: <a onclick="return showPic(this)" href="Scott.jpg" title="Scott calendar"> Scott calendar </a> [Maybe add this under thumbnails?]

So I attempted (without success) variations of
MG1 =new Image(); MG1 = "<img src='03_Scott.jpg' title-'Scott' />";
MG2 = new Image(); MG2.src = '04_ManGoat.jpg';
<div id="space">
<img src="04_AmericanArtist.jpg" alt="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" />
<p class="desc">Caption</p> </div> 

The other onclick ”loadpage” script on the THUMBNAILS is for a pop-window
<div id="thumbnails">
<a href="#nogo" onclick="javascript:loadpage('03_Scott.jpg');
return showPic(this);"
onMouseOver="MGOn('MG1')" title="Scott">
<img name="1" alt="Scott" src="03_Scott.jpg" title="Scott" /></a>
<a href="#" onclick="javascript:loadpage('04_ManGoat.jpg')"
onMouseOver="MGOn('MG2')" title="ManGoat">
<img name="2" alt="ManGoat" src="04_ManGoat.jpg" title="ManGoat" /></a></div>

Perhaps my whole approach is “muddled.”

auntnini

07-24-2008, 10:48 PM

Hummm. This is interesting http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
as discussed in forum http://www.dynamicdrive.com/forums/showthread.php?t=3708&highlight=title+caption

auntnini

07-25-2008, 10:50 PM

Remembering we had to determine: if (! document.images) return; -- it is amazing that <script> below can load images in pop-window:

// JavaScript Document
var mypop=null;
function loadpage(url) {
if ((!mypop) || (mypop.close)) {
mypop = window.open (url, 'mypop', 'width=400px, height=375px, toolbar=0, resizable=1, screenx=0, left=20, screeny=0, top=20');
} else { mypop.document.location.href=url; }
mypop.focus(); return true;
}

But (greedy me), can we also detect / display TITLE="caption" included in a link?
/*in BODY <a href="#nogo" onclick="loadpage('image.jpg')" title="description"> thumbnail / text </a>*/

From http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
//Use link title attr as description
if (this.enableTitle && link.getAttribute("title"))
imageHTML+='<br />'+link.getAttribute("title")

auntnini

08-18-2008, 07:25 PM

mark interesting posts at http://www.dynamicdrive.com/forums/showthread.php?t=35441

and

http://www.dynamicdrive.com/forums/showthread.php?t=35523

auntnini

09-20-2008, 01:10 AM

After struggling with this, gave up onclick ”loadpage” script on the THUMBNAILS for a pop-window, and exchanged the “imgOn” onmouseover for http://www.alistapart.com/articles/imagegallery JavaScript Image Gallery by Jeremy Keith to change images and titles:

<a href="03_CalendarScottPrinting.jpg" onmouseover="return showPic(this)" title="Scott Printing Calendar">
<img name="1" alt="Scott" src="03_CalendarScottPrinting.jpg" /></a>

<a href="04_ManGoat.jpg" onmouseover="return showPic(this)"
title="American Artist cover art">
<img name="2" alt="American Artist" src="04_ManGoat.jpg" /></a>

Adding the onclick “loadpage” still loaded image in pop-window, but – since the href=”imageName” – it also changed document window to display image so dropped the "loadpage" script. Had problem, too, with linking logo image to home page as substitute for CSS Home button.

Results can be viewed at http://jacquimorgan.tripod.com/hist/index.html.

====================================
Even better is .innerHTML (which allows for original script to preload images and pop-window) at http://jacquimorgan.tripod.com/child/index.html#top:

<a href="#nogo" onclick="javascript:loadpage('LightsAlongPath.jpg')"
onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='cover'"> <img name="1" class="thumb" alt="Lights along Path" title="Lights along the Path" src="LightsAlongPath.jpg" /></a>
<a href="#" onclick="javascript:loadpage('c_06.jpg')"
onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='from Lights along Path'"> <img name="2" class="thumb" alt="from Lights along Path" title="from Lights along Path" src="c_06.jpg"/></a>

Got .innerHTML info at http://javascript.about.com/library/bldom06.htm and http://www.tizag.com/javascriptT/javascript-innerHTML.php . Shame on me making it more complicated.

Now must get captions in pop-window.