Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: Looking for code to display larger image when thumbnail is clicked.

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    A good thing to do from time to time as you work on something like that is to view the page in the browser. Use the browser's 'view source' to make sure you're outputting valid code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Probably the easiest to work with. Works well and has many options.

    http://gettopup.com/
    Last edited by djr33; 01-17-2012 at 08:45 PM.

  3. #13
    Join Date
    Apr 2014
    Location
    Essex
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I really like the simplicity of this!

    One thing, can we set the size of the enlarged image to a maximum. I have several images that are different sizes and would like to add more without having to resize before adding to the site.

    I have tried using max-size on the 'loadarea' div but to no avail

    Many Thanks

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    max-size is not a valid css property. You can use max-width and/or max-height.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Apr 2014
    Location
    Essex
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yes sorry don't know what I was thinking of!

    I have tried max-height and max-width on an image in the 'loadarea' div as well as in the div itself but when I hover over the thumbnail it uses the image size. This is what I have tried:
    ==========css
    .loadarea {
    height:330px;
    width:450px;
    background:grey;
    }
    .thumb {
    position:relative;
    float:left;
    height:60px;
    max-height: 300px;
    max-width: 100%;
    }
    ==================html

    <div class="loadarea" id="loadarea"><img class="full" src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg"> </div>

    <a class="thumb" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">
    <img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" class="thumb"></a>

    ==================================
    Is there something I am missing?

    Many thanks

  6. #16
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,023
    Thanks
    44
    Thanked 3,208 Times in 3,170 Posts
    Blog Entries
    12

    Default

    Nothing in the style you show affects images in the loadarea. Use:

    Code:
    .loadarea img {
    	max-width: 425px;
    	max-height: 300px;
    }
    or:

    Code:
    #loadarea img {
    	max-width: 425px;
    	max-height: 300px;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Binary Bridge (04-06-2014)

Bookmarks

Posting Permissions

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