Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Cape Town
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Preload image into iframe

    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.
    Last edited by Anita2105; 10-31-2009 at 04:37 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,669
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.


    Code:
    #picframe {
    	background: url(pictures/citylimits/tr1a.jpg);
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    Cape Town
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Anita2105; 10-31-2009 at 03:31 PM.

  • #4
    New Coder
    Join Date
    Apr 2009
    Location
    Cape Town
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.



    Anita

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,669
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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);}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,669
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Anita2105 View Post
    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.



    Anita
    Yup, inline style, and not a background either. Probably the easiest solution too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Apr 2009
    Location
    Cape Town
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.



    Anita

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,669
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Anita2105 View Post

    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 which works well for me.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •