...

View Full Version : Adding a caption to the main image.



effpeetee
11-24-2008, 08:34 PM
I have had this program under discussion
on the javascript section, but without success.

This program, (http://www.exitfegs.co.uk/hoverstayc.html)after receiving much help from the coders works fine. So well in fact that I want to put the icing on the cake and add captions to the displayed full size images.

What is the correct the way to go? I am not sure how I should go at this but I have the books and am ready to learn - in the first instance by general pointers as to how to proceed.:)

EDIT: I want to leave the existing caption on the thumbs but add a caption to the larger image without losing the present functionality.

Frank

harbingerOTV
11-24-2008, 11:54 PM
start by moving the class 'big' to a span wrapping the image like so:


<li>
<a class="imgshow" href="#">
<img width="90%" src="23a.jpg"/>
<span class="big" style="color: #fff;"><img width="480" height="360" src="23.jpg" />
<br />
jsodjods asodjs
</span>
</a>
Topiary at Mapperton.
</li>

effpeetee
11-25-2008, 07:01 AM
Thanks, but all it does is to add another line to the list which largely behaves as the rest.

I want to leave the existing caption on the thumbs but add a caption to the larger image without losing the present functionality.

I have tried most things but I have an idea that the js is the way to go, but the JS forum doesn't seem to agree. My knowledge of JScript is minimal.

Frustration so far I'm afraid.

Frank

Avril
11-25-2008, 09:19 AM
Hi, Efpeetee!

I think it cannot be done with js without adding a whole new set of coding. However; for those a bit shy of js, here's a link that helps you make css galleries (where you can add the caption with no problem):
http://www.webreference.com/programming/css_gallery/2.html

Cheers!

effpeetee
11-25-2008, 09:45 AM
Thanks Avril, but I want to keep the format exactly as it is but just add caption to main image. I'll probably just print it onto the jpegs.

Frank

effpeetee
11-25-2008, 12:02 PM
Whilst researching this problem:-

Here is a useful caption program (http://exitfegs.co.uk/aaatemplate.html)that I came across.

This is where (http://www.thewebsqueeze.com/tips-and-tricks/adding-a-caption-to-an-image-with-css.html)I got it from.

Frank

Avril
11-26-2008, 01:15 PM
Here's some code I worked on for a gallery - very little js and simple to understand. It also validates !


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Switch Images and Legends</title>
<style type="text/css">
body {margin: 0px; border: 0px; background-color: #b5e3ee;}

div#wrapper {width: 680px; height: 510px; margin-left: auto; margin-right:auto; background-color: #b5f6b0; margin-top: 30px; margin-bottom: 30px; padding: 5px; border: 3px solid #851e0d;
}

div#one, div#two, div#three, div#four, div#five, div#six {float: right; border: 1px solid #851E0D; max-width: 450px;}

div#navi1 {position: absolute; float: left; clear: right; width: 100px; margin-left: 5px; border: 1px solid #851E0D;
}

div#navi2 {float: left; clear:all; width: 100px; margin-left: 115px; border: 1px solid #851E0D;
}

div#nav1, div#nav2, div#nav3, div#nav4, div#nav5, div#nav6, div#nav7, div#nav8, div#nav9, div#nav10, div#nav11, div#nav12 {float: left; width: 110px; height:85px;font-family: tahoma, verdana, times, sans-serif; font-size: 10px; color: #90232e;}

#image-switch #two, #image-switch #three, #image-switch #four, #image-switch #five, #image-switch #six {
display:none;
}

.legend {font-family: tahoma, verdana, times, sans-serif; font-size: 12px; color: #90232e; text-align: center;}
ul {list-style-type: none; font-family: tahoma, verdana, times, sans-serif; font-size: 10px; color: #90232e;}
</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four','five','six'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["wine"].src = i;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="image-switch">
<div id="one">
<div class="legend">
<img src="images/extcomm1.jpg" alt="Supermarche">
<p>Voici un supermarch&eacute; dans la r&eacute;gion de Lyon</p>
</div></div>
<div id="two">
<div class="legend">
<img src="images/extcomm2.jpg" alt="Immeuble Commercial">
<p>Immeuble commercial. Le style d'architecture qu'on trouve partout.</p>
</div></div>
<div id="three">
<div class="legend">
<img src="images/extcomm3.jpg" alt="Nightclub">
<p>Boite de Nuit. Exemple d'une fa&ccedil;ade qui nous rappelle les ann&eacute;es soixante et soixante-dix.</p>
</div></div>
<div id="four">
<div class="legend">
<img src="images/extcomm4.jpg" alt="Entree">
<p>Entr&eacute;e d'h&ocirc;tel</p>
</div></div>
<div id="five">
<div class="legend">
<img src="images/extcomm5.jpg" height="300px" width="450px" alt="Cinema">
<p>Cinema</p>
</div></div>
<div id="six">
<div class="legend">
<img src="images/extcomm6.jpg"alt="Facade">
<p>Fa&ccedil;ade d'immeuble</p>
</div></div>

</div>
<div id="navi1">
<div id="nav1">
<a onmouseover="switch1('one');"><img src="images/thumbsupermarket.jpg" alt="Supermarche"><br>Supermarch&eacute;</a></div>
<div id="nav2"><a onmouseover="switch1('two');"><img src="images/thumbcommercial.jpg" alt="commr"><br>Immeuble</a></div>
<div id="nav3"><a onmouseover="switch1('three');"><img src="images/thumbboite.jpg" alt="boite"><br>Bo&icirc;te de nuit</a></div>
<div id="nav4"><a onmouseover="switch1('four');"><img src="images/thumbhotel.jpg" alt="hotel"><br>H&ocirc;tel</a></div>
<div id="nav5"><a onmouseover="switch1('five');"><img src="images/thumbcinema.jpg" alt="cinema"><br>Cinema</a></div>
<div id="nav6"><a onmouseover="switch1('six');"><img src="images/thumbfacade.jpg" alt="facade"><br>Fa&ccedil;ade</a></div>

</div>
<div id="navi2">

<div id="nav7"><a onmouseover="switch1('one');"><img src="images/thumbsupermarket.jpg" alt="Super"><br>Supermarch&eacute;</a></div>
<div id="nav8"><a onmouseover="switch1('two');"><img src="images/thumbcommercial.jpg" alt="commr"><br>Immeuble</a></div>
<div id="nav9"><a onmouseover="switch1('three');"><img src="images/thumbboite.jpg" alt="boite"><br>Bo&icirc;te de nuit</a></div>
<div id="nav10"><a onmouseover="switch1('four');"><img src="images/thumbhotel.jpg" alt="hotel"><br>H&ocirc;tel</a></div>
<div id="nav11"><a onmouseover="switch1('five');"><img src="images/thumbcinema.jpg" alt="cinema"><br>Cinema</a></div>
<div id="nav12"><a onmouseover="switch1('six');"><img src="images/thumbfacade.jpg" alt="facade"><br>Fa&ccedil;ade</a></div>
</div>

<div class="clear">
</div>
</div>

</body>
</html>


Hope it works as I haven't tried it out on IE yet as I work on a Mac.

effpeetee
11-26-2008, 02:01 PM
Thanks Avril.

This is what I get (http://exitfegs.co.uk/Avril1.html)when substituting the thumbs. They are just some that I had handy,

Is this what you intended?

It looks reasonable with FFox, but it is out of control with IE7.

Frank

Avril
11-26-2008, 05:04 PM
Ah, the little bug-ger IE!

For the thumbs, the ones I have are the same width as the "nav" (and also the "navi"), 100px, and the large images are the same width as the div#1, 2, 3, etc (400px X 300px). You would therefore have to adjust the images to fit the divs (or put in the image size for each image, then adjust).

Cannot get to a PC for the next 2 days, but a separate stylesheet for IE is called for and the use of conditional statements so that they show up as they should. In the meantime, maybe someone in the forum could help?

effpeetee
11-26-2008, 05:34 PM
I have put width and height constraints on the jpgs. I can alter the sizes if you wish.

I'm not sure what is supposed to do what!

Uploaded. (http://exitfegs.co.uk/Avril1.html)

Frank

Website. (http://www.exitfegs.co.uk)

Avril
11-27-2008, 08:08 AM
Hi, Effpeetee!

I reviewed the code and saw that the two rows of thumbs was causing a conflict, so changed it although I don't like using absolute position! I've also put in comments to show what each div does. It validates. Hope it helps.

If you have an app to batch resize your photos and thumbnails, then change the thumbs to 100px x 73px, and the large images to 450px x 300px (can be slightly higher). Here's the new code.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Switch Images and Legends</title>
<style type="text/css">
body {margin: 0px; border: 0px; background-color: #b5e3ee;}

div#wrapper {width: 680px; height: 510px; margin-left: auto; margin-right:auto; background-color: #b5f6b0; margin-top: 30px; margin-bottom: 30px; padding: 5px; border: 3px solid #851e0d;
}

div#one, div#two, div#three, div#four, div#five, div#six, div#seven, div#eight, div#nine, div#ten, div#eleven, div#twelve {float: right; border: 1px solid #851E0D; max-width: 450px; width: 450px; height: 350px;}

div#navi1 {position: absolute; clear: right; width: 100px; margin-left: 0px; margin-top: 0px; border: 1px solid #851e0d;
}

div#navi2 {position: absolute; float: left; clear:all; width: 100px; margin-left: 105px; margin-top: 0px; border: 1px solid #851e0d;}

div#nav1, div#nav2, div#nav3, div#nav4, div#nav5, div#nav6, div#nav7, div#nav8, div#nav9, div#nav10, div#nav11, div#nav12 {float: left; width: 100px; height:85px; font-family: tahoma, verdana, times, sans-serif; font-size: 10px; color: #90232e; line-height: 12px;}

#image-switch #two, #image-switch #three, #image-switch #four, #image-switch #five, #image-switch #six {
display:none;
}


#image-switch2 #seven, #image-switch2 #eight, #image-switch2 #nine, #image-switch2 #ten, #image-switch2 #eleven, #image-switch2 #twelve {
display:none;
}

.legend {font-family: tahoma, verdana, times, sans-serif; font-size: 12px; color: #90232e; text-align: center;}

</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["wine"].src = i;
}
</script>
</head>
<body>
<!--begin wrapper-->
<div id="wrapper">

<!--begin image switch-->
<div id="image-switch">

<div id="one">
<div class="legend">
<img src="images/extcomm1.jpg" alt="Supermarche">
<p>Supermarket in Lyon</p>
</div></div>

<div id="two">
<div class="legend">
<img src="images/extcomm2.jpg" alt="Immeuble Commercial">
<p>Office building</p>
</div></div>

<div id="three">
<div class="legend">
<img src="images/extcomm3.jpg" alt="Nightclub">
<p>Nightclub - in the architecture of the 60s</p>
</div></div>

<div id="four">
<div class="legend">
<img src="images/extcomm4.jpg" alt="Entree">
<p>Entrance to a hotel</p>
</div></div>

<div id="five">
<div class="legend">
<img src="images/extcomm5.jpg" alt="Exterieur">
<p>Outside view of house</p>
</div></div>

<div id="six">
<div class="legend">
<img src="images/extcomm6.jpg" alt="Facade">
<p>Facade of a building</p>
</div></div>

</div>
<!--end of image-switch-->

<!--beginning of image-switch2-->
<div id="image-switch2">

<div id="seven">
<div class="legend">
<img src="images/extres1.jpg"alt="Residence1">
<p>Residence Number 1</p>
</div></div>

<div id="eight">
<div class="legend">
<img src="images/extres2.jpg"alt="Residence2">
<p>Residence Number 2</p>
</div></div>

<div id="nine">
<div class="legend">
<img src="images/extres3.jpg" alt="Residence3">
<p>Residence Number 3</p>
</div></div>

<div id="ten">
<div class="legend">
<img src="images/extres4.jpg"alt="Residence4">
<p>Residence Number 4</p>
</div></div>

<div id="eleven">
<div class="legend">
<img src="images/extres5.jpg"alt="Residence5">
<p>Residence Number 5</p>
</div></div>

<div id="twelve">
<div class="legend">
<img src="images/extres6.jpg"alt="Residence6">
<p>Residence Number 6</p>
</div></div>

</div>
<!--end image switch2-->


<!--begin navi1-->
<div id="navi1">

<div id="nav1">
<a onmouseover="switch1('one');"><img src="images/thumbsupermarket.jpg" alt="Supermarche"><br>Supermarch&eacute;</a></div>

<div id="nav2"><a onmouseover="switch1('two');"><img src="images/thumbcommercial.jpg" alt="commr"><br>Immeuble</a></div>

<div id="nav3"><a onmouseover="switch1('three');"><img src="images/thumbboite.jpg" alt="boite"><br>Bo&icirc;te de nuit</a></div>

<div id="nav4"><a onmouseover="switch1('four');"><img src="images/thumbhotel.jpg" alt="hotel"><br>H&ocirc;tel</a></div>

<div id="nav5"><a onmouseover="switch1('five');"><img src="images/thumbextcomm5.jpg" alt="cinema"><br>Exterieur</a></div>

<div id="nav6"><a onmouseover="switch1('six');"><img src="images/thumbfacade.jpg" alt="facade"><br>Fa&ccedil;ade</a>
</div>

</div>
<!--end navi1-->

<!--begin navi2-->
<div id="navi2">

<div id="nav7"><a onmouseover="switch1('seven');"><img src="images/extres1thumb.jpg" alt="Resi 1"><br>Residence 1</a></div>

<div id="nav8"><a onmouseover="switch1('eight');"><img src="images/extres2thumb.jpg" alt="Resi 2"><br>Residence 2</a></div>

<div id="nav9"><a onmouseover="switch1('nine');"><img src="images/extres3thumb.jpg" alt="Resi 3"><br>Residence 3</a></div>

<div id="nav10"><a onmouseover="switch1('ten');"><img src="images/extres4thumb.jpg" alt="Resi 4"><br>Residence 4</a></div>

<div id="nav11"><a onmouseover="switch1('eleven');"><img src="images/extres5thumb.jpg" alt="Resi 5"><br>Residence 5</a></div>

<div id="nav12"><a onmouseover="switch1('twelve');"><img src="images/extres6thumb.jpg" alt="Resi 6"><br>Residence 6</a></div>

</div>
<!--end navi2 -->



</div>
<!--end wrapper-->
</body>
</html>

effpeetee
11-27-2008, 12:21 PM
Thanks Avril,

I think that I am getting the hang of the program to a certain degree, but not in detail.
I have resized some images to the size suggested. It looks OK in FFox. IE7 is not too bad now.

I have put it here (http://exitfegs.co.uk/avril3.html). I have modified navi1 and navi2.

Any further comments welcomed. It looks promising,to do what I am after.

Frank

bazz
11-27-2008, 01:08 PM
I don't think I will be of much help to you Frank except to say that, in FF3, mousingover the last thumbs brings up two large ones - the last and first enlargements.

You have actually reached a stage where, I think, you'd be better off with the lightbox program, which does pretty much, exactly what you want.

http://www.huddletogether.com/projects/lightbox2/

bazz

effpeetee
11-27-2008, 01:26 PM
Thanks bazz,
but I particularly want to have the hover only, to bring up the large image.
I have, with Aero's help produced what I want (http://exitfegs.co.uk/hoverstayc.html)except that I want the title caption to appear with the larger image. This one from Avril (http://www.exitfegs.co.uk/avril3.html)looks promising.

This is what all the effort is about. I know that it is not vital, but I have a hankering for it. It should be possible. I just have to find the secret. I have plenty of time to do this so I will persevere.

Thanks again.

I sorted out the extra picture problem.

Frank

Avril
11-27-2008, 05:32 PM
Hi, Effpeetee!

You need to:
1. decide how many photographs you wish to display and adjust the height of the "wrapper" accordingly. No height "auto" or your wrapper will not extend to the bottom.
2. If you want a title for each thumbnail underneath, then you would have to adjust the thumbnail size to about 12px higher than the size of your thumbs so that there is a space underneath for the title (font-size of title: 10px).
3. The legend for the large images overshoot the div height of the image. Change the height of the div#one, two etc. accordingly. Instead of 350px make it 370px or 380px.

It should work then.

Cheers!

Avril

effpeetee
11-27-2008, 05:49 PM
Hi. Avril.

As it is it does not overlay anything on my PC with IE7. I use 1024x768.
Are you saying that the caption should be inside the image div, I left it outside by choice. I didn't consider the alternative.

I can soon put it right. It is a very good program (http://www.exitfegs.co.uk/avril3.html)that does just what I want. My biggest problem is my very poor knowledge of javascript.

Thanks again for your help.

Frank

Avril
11-27-2008, 05:55 PM
Hi, again!

The javascript does not change. It's there only to do the image switching for you - you will only have to play around with the div heights to see what you want in the end.

Have fun!

Avril



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum