Load <DIV> content after link is clicked?

[Westin]

Hi,

 

I've got a question about loading the content of a div iframe container.

 

As I just found out, I've got about 60 images loading with every page in div containers. On the one hand it makes it real fast to show the images when a link is clicked on, however I'd rather not load up all these images in the div containers until someone clicks on the actual link.

 

So, is it possible to load the content of a div container only after the user has clicked on the link?

Currently my coding looks sort of like this:

 

 

And is called by:

<%if cardqty1%><%cardqty1%><%cardname1%><%if cardname1%>$<%get_value_prices($cardname1)%><%endif%><%endif%>

 

Sorry for all the extraneous stuff, it's part of a database system. So to recap, I'd like to make it so that the actual iframe images don't load until the user clicks on the link.

 

 

Also, is it possible to make it so that when a user clicks on one image link, the image appears where it does, now when they click on a second image link, I'd like to make it appear exactly where the first one is, either by placing it on top of the first image or by having the first image close and the second one appear in it's place.

CARD VIEWER
Click Cards to close

Edited April 21, 2009 by Westin

[LSW]

OK, is this a photo album sort of thing?

 

iFrames load an external page, so every image needs to be on a separate page.

 

You may wish to use a disjointed rollover. The images are all on the one page but placed off page (due to wide screen monitors, use -999000px or more). When the linked image is rolled over, it moves the larger image on screen wherever you define it. One advantage to this is that it is a rollover, so when the mouse is moved the image vanishes and it can frustrate right click grabbers if they do not know what they are doing.

 

http://meyerweb.com/eric/css/edge/popups/demo2.html

[PicnicTutorials]

Here is how to do it with iframes. http://www.brainjar.com/css/tabs/demo.html

[jlhaslip]

have you looked at the Image Galleries available at cssplay.co.uk ?

[Westin]

It's not an image gallery.

 

It's a card databse for the game Magic The Gathering. People signup, and they add their decks to the database. Once their deck is added, people can view the decks, and click on the name of card listed in the deck and be shown an image of the card.

 

Image galleries unfortunately won't work for what we are doing, and we already have a rather expensive database system that we bought years and years ago that needs to be customized for each individual use which is what Im attempting to do. This being the first time we've tried to use it in this manner with the images unhiding themselves when people click on links. The last time we had to do one of these, frames were still the *in* thing to use. So it's been a while.

 

Thanks,

 

Is there a way of getting the previous iframe with image to hide itself again when someone clicks on a second link that opens another image in a hidden iframe?

 

Example (this is basically how it looks now when someone clicks on each link to open the image):

Link 1 Image 1

Link 2 Image 2

Link 3 Image 3

 

What I want it to do:

Link 1 Image 1

Link 2 ^^^^^

Link 3 ^^^^^

 

So when the user clicks on the 2nd link, I want the first image to close and the second image to open in it's place.

 

I think I could do this if I had a command that would close any open div iframes at one time. As it is now they have to click on the link once to open the image, and once again to close it. Id like it to where no matter what link they click on, which ever image is open, I'd like it to close and the image associated with the new link they clicked on to show. Otherwise, for every link they click on, they get another image showing going down in a row like

1

2

3

4

5

6

etc.

[LSW]

Ok, I was not able to really see what it was you wanted.

[Wickham]

So when the user clicks on the 2nd link, I want the first image to close and the second image to open in it's place.

 

If you just have one iframe, then each time a link is clicked it will load the new page into the iframe and, of course, get rid of the page that was there before. I'm not sure why you want so many iframes if only one has an image.

 

This example http://www.wickham43.net/framesets.php near the bottom titled An inline iframe using target="..." shows three links which could be vertical and each opens a page in the same iframe, The inserted page could be a html page with the image or just the image and it wouldn't download the new page or image until the link was clicked.

Edited April 22, 2009 by Wickham

[Westin]

I've got so many iframes because i only want one image showing when they click on a link. Inside of the iframe is only the img src tag to show the image that represents the link they clicked on. So I've got about 60 iframes that are hidden until the link is clicked when it is then shown each iframe has it's own image.

 

I'm guessing that there is no way to close an iframe by opening another iframe.

Edited April 22, 2009 by Westin

[Wickham]

It's the sort of thing javascript should be able to do but beyond my capabilites. Try again on the javascript board.

[lm]

well it is an image gallery thing in a sense that what you describe, many of them do.

And as you have extensive database, you will need some serious PHP based gallery to sort your database.

So I suggest, google php image gallery, or may be even Flash or Lightbox based.

There are plenty around.

[PicnicTutorials]

Or you could do it like this...

 

http://www.visibilityinherit.com/code/swap-panels-example.php

[Westin]

Or you could do it like this...

 

http://www.visibilityinherit.com/code/swap-panels-example.php

 

Well, I think that would solve one of the situations, where by the images would always show up in the one location, but if I put image src tags inplace of the following:

img src=


img src=



img src=


img src= 


img src =

 

Then it would still load up all the images when the page loads, is that correct?

 

Here's a thought. If I were able to place the source of the iframe to be a html page with only the img src tag on that html page, then when the original page loads with those 60 iframes all of them pointing to individual html pages, would the content (one image per html page) of those html pages still load up at the time of the page that contains all those iframes?

 

I don't think it all that feasible to try to create 10,669 html pages all with one image tag on them unless I can figure out how to do it dynamically instead of static pages, and only if the images don't load until the iframe is actually shown, otherwise I'd just be wasting my time and accomplishing nothing more than what I've already got.

Edited April 22, 2009 by Westin

[Wickham]

I forgot to put the link in my first post, which was meant to be

http://www.wickham43.net/framesets.php

which does the same thing as Eric's code; it has several links and loads up just one iframe, so only the first iframe page loads with the parent page, the others load when you click a link.

 

If I were able to place the source of the iframe to be a html page with only the img src tag on that html page, then when the original page loads with those 60 iframes all of them pointing to individual html pages, would the content (one image per html page) of those html pages still load up at the time of the page that contains all those iframes?

 

If you have 60 iframes, the parent page will have to load all the pages with images that go into the iframes. However, you can leave each iframe without an initial page in it, so that it would just show an empty iframe until you click each link when the image would load into the targetted iframe (you can load an image on its own or an image inside a html page into an iframe). Is that what you want, 60 empty iframes when the parent page loads?

 

Edit: I've just tried that using this code on my page:-

 

where the src="photo1.html" has been deleted in the iframe, and the iframe is just empty white space until you click one of the targetted links.

Edited April 22, 2009 by Wickham