Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Adding a caption to the main image.

    I have had this program under discussion
    on the javascript section, but without success.

    This program, 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
    Last edited by effpeetee; 11-25-2008 at 05:57 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    start by moving the class 'big' to a span wrapping the image like so:
    Code:
    <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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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/programm...gallery/2.html

    Cheers!

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Whilst researching this problem:-

    Here is a useful caption program that I came across.

    This is where I got it from.

    Frank
    Last edited by effpeetee; 11-25-2008 at 11:40 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Here's some code I worked on for a gallery - very little js and simple to understand. It also validates !

    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 {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.

  • Users who have thanked Avril for this post:

    effpeetee (11-28-2008)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks Avril.

    This is what I get 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
    Last edited by effpeetee; 11-26-2008 at 01:07 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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?

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    Frank

    Website.
    Last edited by effpeetee; 11-26-2008 at 05:18 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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.

    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>
    Last edited by Avril; 11-27-2008 at 07:11 AM.

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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. I have modified navi1 and navi2.

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

    Frank
    Last edited by effpeetee; 11-27-2008 at 11:59 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    Last edited by bazz; 11-27-2008 at 12:10 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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 except that I want the title caption to appear with the larger image. This one from Avril 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
    Last edited by effpeetee; 11-27-2008 at 12:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •