Results 1 to 3 of 3

Thread: Popup image viewer

  1. #1
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Popup image viewer

    1) Script Title: Popup image viewer

    2) Script URL (on DD):
    http://www.dynamicdrive.com/style/cs...p-image-viewer

    3) Describe problem:
    I've tried to place this script in my wordpress blog. First I inserted the css in my current themes style sheet, but I wasn't getting any image to popup, only the caption. Then I inserted it directly into the header and it works... sort of.

    I'm using a text link rather than thumbnail. Instead of getting the full-size image to popup, I get a very small thumbnail of the image, and the caption below it.

    I sample can be seen here, the popup link is Goliath in the 4th paragraph:
    http://massagestcroix.com/stcroixblo...to-one-day/44/

    This happens both with FF on a Mac and IE7 on a pc.

    Any suggestions?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You have a style in your style.css file:

    Code:
    p img { 
    	padding: 0;
    	max-width: 100%;
    }
    Since the image and its span and link are inside a paragraph (<p>) element, the above style applies. The padding is overidden, but the max-width is not, by this style on the page:

    Code:
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    The net effect of that is limiting the width of the image to, presumably the width of its parent element. As, the parent is a span and/or an anchor link (to have real layout width it should be a block level element, or at least not absolutely positioned and hidden, as is the span element), various browsers will interpret this differently, but typically from 0 to 100% of the offsetWidth (the length of the word Goliath in this case).

    You can either remove the max-width style from the p img selector, or override it here, like so:

    Code:
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    max-width:none;
    }
    Tested only in FF.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. I'll give it a shot and test it out.

    Edit: Cool. Worked like a charm. Thanks again.
    Last edited by meeeeshstx; 07-25-2007 at 03:02 AM.

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
  •