Hi,

Im trying to create a portfolio page on my website and would like to make use of the iframe widget to keep the page clean looking and easy to navigate. Could you take a look at what I have at this link to better understand what I'm trying to do?

http://money4grab.com/CCD/Color_Curve_D ... _test.html

So, I would like to present my portfolio "thumbnail list" on the side of the page using iframes. Is there a way to "click" on a thumbnail and have it load in a SEPARATE, larger, iframe box to the left? Its obviously important that the thumbnail iframe box does not also try to load the page...


Or...is there a script I could insert as an HTML Snippet for the entire concept of what im trying to do?
Thanks for looking at this and I hope to hear from you soon ...

Chapter 2 of this FAQ:
http://iwebfaq.org/site/iWeb_iframe.html
already contains the answer you're looking for.

Cédric

ok, This is just not working out for me.... please bear with me and I will try to make this as painless as possible.

I have this page....:
http://money4grab.com/CCD/Final_Portfolio_page.html

and I have two iframes on it. I need them to talk to each other.

One iframe is referencing this test page:
http://money4grab.com/CCD/CCD_iframe.html

...so that when you choose the thumbnail image it will make the second bigger iframe reference an image on another page (actually a folder on my server according to your instructions, i think
http://money4grab.com/Portfolio_images_620x330/eva.jpg

I would like each picture in the scrolling iframe to be a separate link to open a separate file in the other iframe.

Am I setting this up correctly? Don't bother looking at the code to see the HTML snippet. At this point in time, I have not uploaded my experimental iweb coding to the internet because its not working yet, and I wanted you to see the page undefiled!

But I will copy/paste the code I have so far in iweb. I guess the bold urls below is whats in question. I only did 2 so far to test it out and its not working for me. And Im also not sure about the code for the other iframe too. Any help would be much appreciated!
Thanks[/size]

<div style="width:215px; height:445px; font-family: Trebuchet MS; font-size: 12px; color:#000000;">
<style type="text/css">
a:link {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #0000FF;
text-decoration: underline;
}
</style>
<a href="http://money4grab.com/Portfolio_images_620x330/eva.jpg" target="Showframe" class="class1"><img src="http://money4grab.com/CCD/CCD_iframe.html"></a><br>
<a href="http://money4grab.com/Portfolio_images_620x330/eva2.jpg" target="Showframe" class="class1"><img src="http://money4grab.com/CCD/CCD_iframe.html"></a><br>
<a href="http://iwebfaq.org/site/iWeb_iframe_4.html" target="Showframe" class="class1">She&#8217;s a princess</a><br>
</div>

I'm a human being too.




If you bought my book and read the "Basic HTML-Codes knowledge base" chapter you would know that <img src is used to embed images, this is also described in the iFrames FAQ on my website. Now what you did is you put an HTML page in there instead of an image... Which obviously does not work. If something wants an image you have to give it an image. Since you took the code from one of my pages I guess I also explained it on the page you took it from since I usually always explain it and yes it takes me quite some time to try to explain all that stuff.

Now what I will do here is provide you two codes. One for the menu and one for the area where "the big" will display. Just copy them without changing anything. Paste them into an HTML Snippet each, hit Apply and you will see them magically working once published to the web or to a folder (not in iWeb itself!). Hopefully you will then understand how it works.

Code for the menu:



Code for the area where "the big" displays...




Good luck,
Cédric

Cédric
It works great! I will definitely buy the book! But I have to disagree with you, you are not just "a human being" - you are an amazing human being!!!

I confused the 'image url' to the page of images i had created in iweb rather than to an actual image on the server.

One more thing though, you took out the "<div style="width:215px; height:445px; font-family:...." from the code. Is there any way to make the iframe a set dimension, and make the thumbnails scroll within those parameters so that I don't have a long list of image icons running down the page?

(I tried putting them back in, but only the width parameter obeyed (as you can see - http://money4grab.com/CCD/Final_Portfolio_page.html), but I was unsuccessful at the height being only 445px.)

Also, what do you suggest in getting a 15px white space between each thumbnail? If I put a white border on the top of each image on the server, then it will show up in the other iframe too, right?


philip

Thing is the height parameter doesn't make much sense in there. If an HTML Snippet needs a height of 600px it will take those 600px even if you set it to be 450px. If you want to have an iFrame with scrollbars (which would definitely look better) you would have to paste the HTML Snippet with the menu on another page and embed that page with the menu in the original page with an iFrame.



Usually people have two versions of a photo on their server. Full size and small size (thumbnail). Using a small sized image for the menu results in faster loading times of the page. Also you could add that white border to the smaller version of the image only so it will not display on the big sized image.

Have a nice day,
Cédric