Alternatives to Iframes?

[osman]

Hi all, I'm working on a site where I need to have a gallery.
I've been given a few pictures to start off with and I'd like to show
it all on one page.
My one works, but there are issues.
It has little code (unordered list) and works(?) in all browsers :

http://chameleonmoments.com/station13/art.html
(not tested in ie)

On one side I've used an iframe with a target name (name="picture").
On the other side there are the thumbnail links with target
destinations (target="picture").

I know that the use of iframes is a real no-no, I want to know what the
alternatives are.
Something simple and obvious, surely.

Javascript is not an option and neither is php. Its a static 5 page
site.

 

[Dr Clue]

Hi all, I'm working on a site where I need to have a gallery.
I've been given a few pictures to start off with and I'd like to show
it all on one page.
My one works, but there are issues.
It has little code (unordered list) and works(?) in all browsers :

http://chameleonmoments.com/station13/art.html
(not tested in ie)

On one side I've used an iframe with a target name (name="picture").
On the other side there are the thumbnail links with target
destinations (target="picture").

I know that the use of iframes is a real no-no, I want to know what the
alternatives are.
Something simple and obvious, surely.

Javascript is not an option and neither is php. Its a static 5 page
site.

Something like this could work with a div in the page
<div id="DIVpicture"></div>


document.getElementById("DIVpicture").innerHTML='<img src="my.gif">')

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

 

[Jonathan N. Little]

Dr Clue wrote:

Something like this could work with a div in the page
<div id="DIVpicture"></div>


document.getElementById("DIVpicture").innerHTML='<img src="my.gif">')

Ah, OP said:

And that is JavaScript....

 

[Dr Clue]

Dr Clue wrote:

Oops , did not see that. Bound to miss-read one now and again,
thaks for pointing it out.





--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

 

[Dr Clue]

Hi all, I'm working on a site where I need to have a gallery.
I've been given a few pictures to start off with and I'd like to show
it all on one page.
My one works, but there are issues.
It has little code (unordered list) and works(?) in all browsers :

http://chameleonmoments.com/station13/art.html
(not tested in ie)

On one side I've used an iframe with a target name (name="picture").
On the other side there are the thumbnail links with target
destinations (target="picture").

I know that the use of iframes is a real no-no, I want to know what the
alternatives are.
Something simple and obvious, surely.

Javascript is not an option and neither is php. Its a static 5 page
site.

I mis-posted before , as I had missed the part ruling out javascript,
but someone mentioned it so I thought I'd re-visit the question.

How about changing the link to

<a href="#pictureOne>" title="click to view creature design">creature
<span>Image one, by Redstar Studio</span></a>

place the images spread down the page with
<a name="pictureOne">[pictureone]</a> underneath each image

<a name="pictureTwo">[pictureone]</a> underneath each image
.....
.....

Then you can put the rest of the screen elements as position:fixed

Appearancewise it should look the same as your iframe solution


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

 

[osman]

Dr Clue wrote

so I thought I'd re-visit the question.

Thanks for having another go at it.
Interesting method.
You're suggesting having all the images load on the page and making the
links to them as anchors.
So the anchors take you to the pictures 'down' the page.
I really need to keep it all inside the 600px high design.
Maybe having the images stacked on top of each other will work.
Though I can't see how this will change the z-index, width/height or
any other style attribute of the images.

I'm working on it.
http://cssplay.co.uk/menu/gallery4.html#nogo has some great examples,
but none that work 100% for me.

This is so easy with flash, but I'm determined to do it in xhtml.
Haven't looked at xframes or xml. Is that an easy option?

 

[Dr Clue]

Dr Clue wrote



Thanks for having another go at it.
Interesting method.
You're suggesting having all the images load on the page and making the
links to them as anchors.
So the anchors take you to the pictures 'down' the page.
I really need to keep it all inside the 600px high design.

Well , if done well , the person viewing the page would have an
itentical user experiance either way, so I'm not sure what the objection is

Maybe having the images stacked on top of each other will work.
Though I can't see how this will change the z-index, width/height or
any other style attribute of the images.

I piddled with that thought too, and the nearest it would resolve in
my mind was an ugly piece of soup where the 500x500 display iframe
was replaced with divs/spans that were actually inside each of the links
and a variation on the css rule you are using did the trick trading out
the span portion of the rule for an id and having two spans
to talk to and two rules ending in id's instead of elements
As that thought went on , z-indexing indeed came into the proces, as I

I'm working on it.
http://cssplay.co.uk/menu/gallery4.html#nogo has some great examples,
but none that work 100% for me.

This is so easy with flash, but I'm determined to do it in xhtml.
Haven't looked at xframes or xml. Is that an easy option?

I like flash about as much as I like microsoft, I'd much rather do
it in VEML.


--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

 

[Rossz]

Hi all, I'm working on a site where I need to have a gallery.
I've been given a few pictures to start off with and I'd like to show
it all on one page.
My one works, but there are issues.
It has little code (unordered list) and works(?) in all browsers :

http://chameleonmoments.com/station13/art.html
(not tested in ie)

On one side I've used an iframe with a target name (name="picture").
On the other side there are the thumbnail links with target
destinations (target="picture").

I know that the use of iframes is a real no-no, I want to know what the
alternatives are.
Something simple and obvious, surely.

Javascript is not an option and neither is php. Its a static 5 page
site.

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

 

[osman]

Rossz wrote :

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

Thanks Rossz. Thats something that got me into this whole css thing a
year ago. I'm using a similar technique to show the rollovers in the
menu. They only show on rollover, not on click, so can't be used to
load the large image.

 

[rossz]

Thanks Rossz. Thats something that got me into this whole css thing a
year ago. I'm using a similar technique to show the rollovers in the
menu. They only show on rollover, not on click, so can't be used to
load the large image.

I'm sure it would be feasible to get it to do something on the click
like passing an image code back to itself, but that would require
something like PHP, Perl, or Javascript to process it.

 

[osman]

get it do something on the click ...

Thanks for the help. I did it with a simple trick :
The big images are stacked ontop of each other with style display:none.
The image links are anchors and the :target css3 attribute is used.
Pro is it works like a charm, con is that all images load up and its
non ie6.

http://chameleonmoments.com/station13/art.html

 

[Toby Inkster]

:target css3 attribute is used. Pro is it works like a charm, con is
that all images load up and its non ie6.

Con is that the :target CSS3 pseudo-class (it's a "pseudo-class", not an
"attribute") has not been standardised yet, so relying on any support for
it is extremely iffy and likely to break things in the future.

AFAIK, only Gecko- and KHTML-family browers offer experimental support for
it.

 

[osman]

relying on any support for it is extremely iffy...

I knew there would be something to add to the cons.
IE7 will support :target
(http://dean.edwards.name/IE7/compatibility/index.html) I think.
I may have to use javascript if not.
Any other ideas?

 

[Toby Inkster]

IE7 will support :target
(http://dean.edwards.name/IE7/compatibility/index.html) I think.

Remember though that:

Dean Edwards' "IE7" != Microsoft Internet Explorer 7.0

I find it unlikely that the latter will support :target.

 

[osman]

I find it unlikely that the latter will support :target.

Yeah...
I used javascript for the iframe like behavior. I still prefer the css
method.
Thanks to all who helped and who just corrected me.

On viewing this site in explorer I see that there are far greater
issues than :target support. The content scrolling doesn't behave
correctly thanks to IE6 and its bugs. Opera has a hard time with the
menu, the image gallery and the footer.
The beat goes on...