Iframe Link to Table

**outremedia** · Jun 7, 2006 07:39

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!

**henkc7** · Jun 8, 2006 04:51

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...

**outremedia** · Jun 8, 2006 19:50

Thanks henkc7!

Works brilliantly. Hadn't even thought of using a scrolling div. Cheers.

**belledumonde** · Jun 9, 2006 19:19

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!

**pig2cat** · Jun 10, 2006 05:11

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

**belledumonde** · Jun 10, 2006 07:52

thanks for pointing me in the right direction!

i'll see how it goes!

**outremedia** · Jun 12, 2006 02:28

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?

User Tag List

Thread: Iframe Link to Table

Thread Tools

Display

Iframe Link to Table

similar problem

Bookmarks

Bookmarks

Posting Permissions