Results 1 to 3 of 3

Thread: CSS Popup Image Viewer: Caption Width

  1. #1
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Popup Image Viewer: Caption Width

    I totally love the CSS Popup Image Viewer control but when I add long caption text to the enlarged image (as in example below), the text wraps to the width of the thumbnail. The only width setting I can find is the thumbnail's width, and I don't want to stretch that out. What can I do?

    <a class="thumbnail" href="#thumb">
    Images/KNO07230.JPG<span>
    Images/KNO07230.JPG
    Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span>
    </a>

    Let's say the tumbnail is 1 inch wide, and the larger image it brings up is 3 inches wide. The text that I add below it (let's call it a caption) wraps inside of a 1-inch wide space. In the example below, I deliberately added a large string ("Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.") to illustrate how this wrapping occurs.

    What do I need to do in order to set the text-wrapping space's width to the same width as the image?

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The text should wrap, or at least it does when I try it. (BTW, make sure you always include a link to the DD script in your posts too)

    If it isn't, you can try setting the width of both pics:

    Code:
    <a class="thumbnail" href="#thumb"><img src="small.gif" style="width:100px; height:66px; border:0; margin: 10px 10px;" /><span><img src="large.gif"  style="width:300px; height:150px; border:0;" /><br />Thumbnail example that uses both thumbnail and full-size imagesfrolm the same image.</span></a>
    And if that doesn't work, post a link to your actual page, maybe its another issue

  3. #3
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Yes, of course the text wraps, but it wraps too much. My picture is 3 inches wide but the caption wraps to a width of only one inch.

    Here's the whole page. Note how the picture caption is way narrower than the picture.

    <div>
    <strong>These examples use the CSS Popup Image Viewer</strong><br />
    <br />

    <br />
    <a class="thumbnail" href="#thumb">
    <img src="Images/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span>
    <img src="Images/ocean.jpg" /><br />Notice that the caption is-word-wrapped to the width of the thumbnail.</span></a>

    <br />

    <br />
    <a class="thumbnail" href="#thumb">Zoka Coffee<span>
    <img src="Images/zoka.gif" />
    <br />Zoka Coffee</span>
    </a>

    </div>

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
  •