SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Iframe Link to Table

    Hey Folks,

    I'm creating an online portfolio for a client at the moment and am having some problems with linking in an iframe.

    I have thumbnails of the clients creations in an iframe on a page and I want the user to be able to click on the thumbnail and have the larger image load within a table in the parent page.

    Is this possible? If so, what do I need to name and link everything as? If it isn't possible, is the best alternative to simply create another iframe in the place of the table and link to that?

    You can see an example of the page here.

    The table it will load into is placed over the large water marked "I" to the right of the iFrame.

    Any help would be greatly appreciated!
    Last edited by outremedia; Jun 7, 2006 at 21:19.
    OUTREMEDIA.com | Web - Graphic - Video

  2. #2
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see why you want to use an iFrame (unless you really want to load the table from another site or html file. I'd use a scrolling div if you know what I mean.

    Code:
    <div id="scrollcontainer">
      <table>
        { blah blah your table content }
      </table>
    </div>
    Using this kind of css:

    Code:
    #scrollcontainer {
        overflow:scroll;
        width:200px;
        height:100px;
        }
    #scrollcontainer table {
        width:181px;
        }
    Make sure the table inside the scrollcontainer is at least 19px smaller that the container itsself. Otherwise you'll get an horizontal scrollbar as well.

    If you insist on using an iFrame I'd use javascript or make an iFrame of the large image as well...

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks henkc7!

    Works brilliantly. Hadn't even thought of using a scrolling div. Cheers.
    OUTREMEDIA.com | Web - Graphic - Video

  4. #4
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    similar problem

    hello! i have a similar problem and hope outremedia wouldnt mind me posting it here.

    what if you want the larger image to appear on the same page?

    see i am also doing that kind of page with thumbnails for my gallery. i haven't uploaded it yet so i'll try to describe it.

    the thumbnails are in the upper portion of the page, and i have an iFrame below them where i want the photos to be displayed as opposed to opening a new window. so far its going great, but all the styling is in my markup including target, borders etc which isnt XHTML 1.0 compliant.

    how do i do this? maybe not using frames? what about the embed or object tags?

    thanks!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Location
    holland
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by belledumonde
    hello! i have a similar problem and hope outremedia wouldnt mind me posting it here.

    what if you want the larger image to appear on the same page?

    see i am also doing that kind of page with thumbnails for my gallery. i haven't uploaded it yet so i'll try to describe it.

    the thumbnails are in the upper portion of the page, and i have an iFrame below them where i want the photos to be displayed as opposed to opening a new window. so far its going great, but all the styling is in my markup including target, borders etc which isnt XHTML 1.0 compliant.

    how do i do this? maybe not using frames? what about the embed or object tags?

    thanks!

    hi m8
    you should check out this thread, it's in php.. but it worked for me
    http://www.sitepoint.com/forums/showthread.php?t=386790


    change the photo links to <a href="nameofpage.php?photo=photo_name"><img src="photo_name" width=width of thumb height=height of thumb></a>

    but, add this to your <head>
    PHP Code:
     <?php
    $blob 
    glob('*.jpg');
    ?> </head>
    and this for your img, <img src="
    PHP Code:
    <?php
    if(in_array($_GET['photo'], $blob)
    {
        include(
    $_GET['photo']);
    }else{
        echo 
    "noacces";
    }
    ?>
    " height=desired height width=desired width>

    hope that helps you

    Edit:

    and make a noacces.jpg file in it in case someone wants to run a script via the url bar... and name your page .php
    Last edited by pig2cat; Jun 10, 2006 at 11:19.
    www.piggymoo.com An Anime & TV community
    Drop by sometimes, especially if you like
    Anime, Stargate, Band of brothers or Futurama!

  6. #6
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for pointing me in the right direction! i'll see how it goes!

  7. #7
    SitePoint Member
    Join Date
    Feb 2005
    Location
    Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got another little problem.

    The site is displaying perfectly (so far as how my client wanted it) in IE and FF now.

    However, it turns out that the larger images (that show up after clicking the thumbnails) are displaying incorrectly in Safari. My Apple laptop died last week, so I can't test it from here...

    A good example of the problem can be seen here, if you click on Thumbnail 4 you'll see what I'm talking about (if you're on a mac).

    The problem is obviously that I don't have the image width and heights set for the larger image table, but that's because the larger images vary in size between each product and I'm unsure of a way to fix this.

    Can any Apple aficionado's help?
    OUTREMEDIA.com | Web - Graphic - Video


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
  •