Resolved Preload image into iframe [Archive]

...

View Full Version : Resolved Preload image into iframe

Anita2105

10-31-2009, 11:11 AM

Hi,

I've designed a really nice looking thumbnail gallery and found a way to display the linked images within an iframe. The divs, iframe, thumbnails and main pictures are all styled with css and everything works perfectly. It is important that the pictures open within the page itself and not as a lightbox. I would prefer to open the pictures in a div but it is too difficult for me at this stage so an iframe does the trick just fine. I want simplicity since I'm doing a mock-up for an online store.

This is my current problem - I want the first thumbnail's linked picture (tr1a) to pre-load and visible in the iframe when the page is loaded. I don't want the iframe to be a 550 x 450 white block of empty space. Here is the code for the thumbnails and the iframe:

<div id="maincontent">

<div id="iframewrap">
<iframe name="picframe" scrolling="No" frameborder="0" id="picframe"></iframe>
</div>
<a href="pictures/citylimits/tr1a.jpg" target="picframe"><img src="pictures/citylimits/tr1a_s.jpg" class="picframe" width="65" height="49" /></a>
<a href="pictures/citylimits/tr1b.jpg" target="picframe"><img src="pictures/citylimits/tr1b_s.jpg" class="picframe" width="65" height="49" /></a>
<a href="pictures/citylimits/tr1c.jpg" target="picframe"><img src="pictures/citylimits/tr1c_s.jpg" class="picframe" width="65" height="49" /></a>
<a href="pictures/citylimits/tr1d.jpg" target="picframe"><img src="pictures/citylimits/tr1d_s.jpg" class="picframe" width="65" height="49" /></a>

</div>

So, can I accomplish this with css or do I have to use a script?

Can anyone help?

The client is breathing all over my neck!

Anita.

Excavator

10-31-2009, 02:46 PM

Hello Anita2105,
This should work alright, as long as tr1a, b, c ... are all the same size so tr1a would be covered up by the new image. If one of the images was smaller, some of tr1a show.

#picframe {
background: url(pictures/citylimits/tr1a.jpg);
}

Anita2105

10-31-2009, 03:18 PM

Hi Excavator,

There are 380 pictures, all the same size.

The "picframe" CSS of the iframe will be used for 48 other pages as well. In every page the first picture of THAT particular thumbnail gallery must be loaded as the first image in the iframe - so this solution will therefor not work since the same background will be loaded into every page.

Anita.

Anita2105

10-31-2009, 04:35 PM

Hi guys,

I've solved the mystery myself by inserting a "source" element within the iframe tag, like this:

<iframe src="pictures/citylimits/tr1a.jpg" name="picframe" id="picframe" scrolling="No" frameborder="0" height="440px"></iframe>

All I have to do is change this picture link on every page with a gallery and the first image of the gallery of THAT particular page will autoload.

:thumbsup:

Anita

Excavator

10-31-2009, 04:36 PM

I would guess you'd either need to load a background image with inline styles or find a script then.

You could only do it with CSS if you gave each iframe it's own id...

You could select each different iframe if you're already doing anything else that required giving each body an id. Not sure it would be worth setting that up just for the background on your iframes, unless you really don't want a script.

Would be something like <body id="product_one">
and #product_one #picframe {background: url(pictures/citylimits/tr1a.jpg);}

Excavator

10-31-2009, 04:40 PM

Anita2105

10-31-2009, 04:47 PM

Hi Excavator,

I see where you're going with your code - I've used this approach before with a menu and it worked really well too.

If you know of a script for a simple in-page galley like this please let me know. There are thousands of scripts out there but none seem have a "gallery-in-page" style.

Hence my use of the iframe in a div. It's not as pretty, but at least it will work.

:p

Anita

Excavator

10-31-2009, 05:08 PM

If you know of a script for a simple in-page galley like this please let me know. There are thousands of scripts out there but none seem have a "gallery-in-page" style.

If you find one, let ME know! :)

For now, I use popbox (http://www.c6software.com/Products/PopBox/) which works well for me.