Skip navigation
fourwhitesocks
fourwhitesocks
Currently Being Moderated

Help with setting up individual thumbnails with captions

Apr 5, 2012 6:03 AM

Tags: #thumbnails

I'm wondering how would be the best way to set up several individual thumbnails (in dreamweaver) which open up to a larger image with a caption; so they are set up like this site:

 

www.maplecreeknursery.com

 

Maybe there is a widget for doing this??

 

I see lots of ways to do thumbnails with captions but not lots of single one like in the site above...

683 Views   12 Replies   Latest reply: fourwhitesocks, Apr 5, 2012 8:17 AM
 
Replies
  • fourwhitesocks
    Currently Being Moderated
    1. fourwhitesocks,
    Apr 5, 2012 6:08 AM   in reply to fourwhitesocks
    Report

    Opps try this link to see what I mean, sorry!

     

    http://www.maplecreeknursery.com/JapaneseMaples.html

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    2. martcol,
    Apr 5, 2012 6:08 AM   in reply to fourwhitesocks
    Report

    Hello,

     

    I can't find anything on that page (using Chrome and Firefox) that does what you describe.

     

    Martin

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    3. fourwhitesocks,
    Apr 5, 2012 6:34 AM   in reply to martcol
    Report

    Try going to: http://www.maplecreeknursery.com/JapaneseMaples.html   but then click on one of the pictures... to see what I'm describing....

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    4. martcol,
    Apr 5, 2012 6:39 AM   in reply to fourwhitesocks
    Report

    That's called a lightbox

     

    There are lots of them out there:

     

    http://fancyapps.com/fancybox/

    http://jquery.com/demo/thickbox/

     

    Or google "lightbox clone"

     

    Martin

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    5. fourwhitesocks,
    Apr 5, 2012 6:44 AM   in reply to martcol
    Report

    Ok yep thank you!

     

    I have seen both of those that you sent be with the above links; but my question is how would you do lots of completely individual ones... you wouldn't want to keep reinserting the app over and over again or would you?   

     

    Will these give me the ability to do a single one and then another single one... etc like the example of the web page like I gave you?

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    6. martcol,
    Apr 5, 2012 6:48 AM   in reply to fourwhitesocks
    Report

    That's not a problem.

     

    You insert a couple of lines of code in the head.  These call in the javascript and CSS.  You download these according to the instructions on the developers site providing the Lightbox.

     

    You make sure you have a thumbnail image and a large image and add the image to your page in the prescribed manner.

     

    martin

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    7. martcol,
    Apr 5, 2012 6:53 AM   in reply to martcol
    Report

    Hmmmm....

     

    When you see these lightbox things going, you're right, they look like individual apps installed on a site.  But really, all that is happing is that the page is calling in some javascript and CSS files, and when the user clicks the image it invokes that code.  Whether you do that in one thumbnail or in a block of 20, it's all the same.

     

    Martin

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    8. fourwhitesocks,
    Apr 5, 2012 7:07 AM   in reply to martcol
    Report

    Ok thank you for explaining that; very helpful.

     

    I do understand already about the java and the CSS but I was struggling with the idea in my head for how to set it up when they are individual, or like not all grouped together like a normal slide show .

     

    I will play around with one of them to see if I can make it work similarly to that sample page; which is just similar to what I'm trying to achieve.

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    9. martcol,
    Apr 5, 2012 7:14 AM   in reply to fourwhitesocks
    Report

    If you look at this page: http://jquery.com/demo/thickbox/

     

    Click the "examples" tab and it will show you the different HTML to use for a single image or a gallery.

     

    Martin.

     

     

    Here's an example on a site that I built.

     

    I use the gallery option on this page: www.andrewjamesartist.com/galleries/portraits-01.php  and then the single image (with text instead of a thumbnail) on this page:

     

    www.andrewjamesartist.com/pages/foreword.php

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    10. fourwhitesocks,
    Apr 5, 2012 7:27 AM   in reply to martcol
    Report

    WOW you are awesome!  Great thanks that gives me a much better understanding!

     

    I like the site you built, I  love it's simpleness (is that a word LOL) it's classy like that!

     

      Now on that Portrait page are those just all next to each other as far as the code correct?  I looked at the code and you just put them inside a div... so you could technically add text under each image thumbnail if you wanted....

     
    |
    Mark as:
  • martcol
    Currently Being Moderated
    11. martcol,
    Apr 5, 2012 7:36 AM   in reply to fourwhitesocks
    Report

    That would be fine.

     

    Martin

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    12. fourwhitesocks,
    Apr 5, 2012 8:17 AM   in reply to martcol
    Report

    THANK YOU 4 the help

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points