Can this be done?

[KiwiBrian]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the previous
large displayed image which would be a little higher on the page.
What is the easiest and/or recommended method of achieving this?
I can create the images OK, it is just the source that I would like ideas
on.
Hopefully using CSS only, but whatever is necessary.
Thanks
Brian Tozer

 

[mbstevens]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the previous
large displayed image which would be a little higher on the page.
What is the easiest and/or recommended method of achieving this?
I can create the images OK, it is just the source that I would like ideas
on.

Either generate the pages at the server or preprocess the pages and
upload them. The common element will be the lefthand div of thumbnails.
(Frames were often used for this in the ancient world, but this spread
a plague of unusability.) You can optionally modify the ordering of the
thumbnails at left depending on the enlargement presently displayed.

 

[Richard]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the
previous
large displayed image which would be a little higher on the page.
What is the easiest and/or recommended method of achieving this?
I can create the images OK, it is just the source that I would like
ideas
on.
Hopefully using CSS only, but whatever is necessary.
Thanks
Brian Tozer

www.somestuff.batcave.net

I use a bit of javascript code which makes it only to simple to switch
images as well as text.
This way I don't worry about all that extra coding just to swap images for
each image.
If you're that worried about the script, do it in php.

var kid = "FirstOn"
function ShowInfo(DivId)
{
document.getElementById(kid).style.display = 'none';
document.getElementById(DivId).style.display = 'block';
kid = DivId;
}

<div onclick=ShowInfo('FirstOn')">


<div id="FirstOn" style="display:block; text-align:center;">
<img src="name1.jpg" name="large">
<p>
Text
</p>
</div>

<div id="hello" style="display:none; text-align:center;">
<img src="name2.jpg" name="large" alt="">
<p>
Text
</p>

 

[Nico Schuyt]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the
previous large displayed image which would be a little higher on the
page.
What is the easiest and/or recommended method of achieving this?
I can create the images OK, it is just the source that I would like
ideas on.
Hopefully using CSS only, but whatever is necessary.

a. A combination of CSS and scripting like PHP:
http://www.porjes.com/butterflies/index.php
Not so easy and the number of pictures in one page is limited.
b. Frames. Thumbnails left, large picture right:
http://www.nicoschuyt.nl/foto.php
Very easy but the usual disadvantages of frames like orphanpages and
problems with indexing by search engines.
For a photo gallery that's acceptable IMO.
With some additional scripting you can probably create a complete gallery
based on a database or based on the structure of the maps on the server.
c. A frame simulation with CSS and javascript.
Not easy and, since a lot of visitors have js disabled, not recommendable.

 

[Barbara de Zoete]

I have a column of thumbnails down the left side of the page.

You have been around now for quite a while in these web authoring groups. Still
you insist on multiposten, like you did with this post (in ciwas). That is
considered bad.

<http://smjg.port5.com/faqs/usenet/xpost.html>


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[jake]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the previous
large displayed image which would be a little higher on the page.
What is the easiest and/or recommended method of achieving this?
I can create the images OK, it is just the source that I would like ideas
on.
Hopefully using CSS only, but whatever is necessary.
Thanks
Brian Tozer

If you want a purely client-side solution: hold the thumbnails in a
scrolling <div> on the LHS, and with an Iframe on the RHS.

When you select the appropriate thumbnail, so the 'big-picture' will
load into the Iframe.

regards.

 

[KiwiBrian]

You have been around now for quite a while in these web authoring groups.
Still you insist on multiposten, like you did with this post (in ciwas).
That is considered bad.

<http://smjg.port5.com/faqs/usenet/xpost.html>

Thanks Barbara.
This is the first time that I have seen such a clear explanation of the
implications of the various options and I will try and remember for the
future.
Regards from New Zealand.
Brian

 

[Richard]

You have been around now for quite a while in these web authoring
groups. Still
you insist on multiposten, like you did with this post (in ciwas). That
is
considered bad.

When will you frickin learn?
There was no crossposting for one.
For another, it is correct to crosspost to relevant groups.

 

[Barbara de Zoete]

When will you frickin learn?
There was no crossposting for one.
For another, it is correct to crosspost to relevant groups.

My god. You still around?

Someone ought to track you down and cut all your 'phone and power wires. Burn
your wheels to and steel your pants and shoes. Get you in complete isolation. It
would do this group a world of good and I dare bet a lot of other communities
too.

It's a good thing that about all of us know how to read _and_ understand what
they read, very unlike you. So I don't have to explain what an utterly stupid
remark you managed to make again.

Please go skiing somewhere nice, enjoy the holiday and then break a couple of
legs for us, will you. Looser.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Nico Schuyt]

KiwiBrian writes

If you want a purely client-side solution: hold the thumbnails in a
scrolling <div> on the LHS, and with an Iframe on the RHS.
When you select the appropriate thumbnail, so the 'big-picture' will
load into the Iframe.

jake, do you have an example of such a solution?

 

[Barbara de Zoete]

jake, do you have an example of such a solution?

I do, if you want it from me in stead of jake

It is on my 'tekeningen' page and has a horizontal layout, but the basics are
identical (scrolling div; iframe (please don't hold these against me, anyone))

<http://home.wanadoo.nl/b.de.zoete/html/tekeningen.html>

Mind you, it is far from ideal, not is it perfect. I, for one, am not at all
satisfied with the results and still trying to find a better solution.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Nico Schuyt]

I do, if you want it from me in stead of jake

Given the fact that you're young, beautiful AND female, I don't mind at all
:0

It is on my 'tekeningen' page and has a horizontal layout, but the
basics are identical (scrolling div; iframe (please don't hold these
against me, anyone))
<http://home.wanadoo.nl/b.de.zoete/html/tekeningen.html>

The drawings are very nice!!

Mind you, it is far from ideal, not is it perfect. ..

Not perfect indeed There's a problem with the thumbs:
http://www.nicoschuyt.nl/test/barbara.png
(ie6 1024x768)
What's the advantage of the iframe in comparison with frames?

 

[Toby Inkster]

I have a column of thumbnails down the left side of the page.
I would like to be able to select any one and have a larger version
displayed to it's right, and of course automatically removing the previous
large displayed image which would be a little higher on the page.

http://examples.tobyinkster.co.uk/bestgallery/

 

[jake]

Given the fact that you're young, beautiful AND female, I don't mind at all
:0

Sorry Nico, I guess I just can't compete ;-)

Actually, I seem to remember the OP having multi-posted into another NG
-- and one of the replies there contained another excellent example.

I'll try and find the NG and the url in question.

 

[KiwiBrian]

http://examples.tobyinkster.co.uk/bestgallery/

Very nice Toby.
I am surprised to find from my enquiries in several different newsgroups
that there does not seem to be a simple (or even not so simple) CSS solution
to this seemingly simple and straightforward requirement.

Brian Tozer

 

[jake]

Sorry Nico, I guess I just can't compete ;-)

Actually, I seem to remember the OP having multi-posted into another NG
-- and one of the replies there contained another excellent example.

I'll try and find the NG and the url in question.

Found it.

It's over on ciwa.stylesheets and one of the posters gives this as an
example:

http://www.curt-balluff.de/bilschau.html

Looks good. Everything arranged so that it fits well into a browser
using a 800px wide screen and above.

 

[Andy Dingley]

There was no crossposting for one.

That's the _point_ you imbecile. Multi-posted (bad) when it should
have been crossposted (good, when appropriate)

<[email protected]>

Your email address just cracks me up...

 

[Nico Schuyt]

jake writes

[photo gallery]

Found it.
It's over on ciwa.stylesheets and one of the posters gives this as an
example:
http://www.curt-balluff.de/bilschau.html
Looks good. Everything arranged so that it fits well into a browser
using a 800px wide screen and above.

Interesting solution. Thanks!

 

[Barbara de Zoete]

Given the fact that you're young, beautiful AND female, I don't mind at all
:0

Look what you've done, now you've made me blush

The drawings are very nice!!

Thank you. Always nice to get a compliment.

Not perfect indeed There's a problem with the thumbs:
http://www.nicoschuyt.nl/test/barbara.png
(ie6 1024x768)

I have this problem in IE6 with all my images. It drives me nuts and I don't
know what it is. The images are about 1 to 2em high when first shown, but on
hover all of a sudden they pop up and take their normal seizes.
Be assured it has nothing to do with the thumbs bar as is in that page. But it
is a real problem and I went nearly crazy trying to find a solution. Never found
it.

What's the advantage of the iframe in comparison with frames?

Well, first of all, you don't have to set up a frameset page. You can insert the
iframe right in to an existing page. Second, it was easy to insert the necessary
lines for the iframe element in my custom DTD; much more easy than it would have
been to modify it to hold the frameset defenitions. Other than that, I don't
think there are any advantages of frames. It has the same disadvantages though
.

It's a pitty one can't (for all I know) name a div and (client side) target some
markup in there.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[rf]

I have this problem in IE6 with all my images. It drives me nuts and I don't
know what it is. The images are about 1 to 2em high when first shown, but on
hover all of a sudden they pop up and take their normal seizes.

Perhaps if you opened up your security a bit it might help us to help you on
this. I tried to view that iframed page by itself and got something else, I
presume a page telling me off for trying to do that

Looking at the CSS... scares me a bit. You use things like display:
table-cell, which IE simply does not understand. It is probably error
correcting this to inline, which is why you get them all scrunched down into
one line-height (co-incidentally between 1 and 2 em ) until a hover (or
in my case a change font size) sets display: block; Purely guesswork at this
stage.

BTW why use dispaly: table cell? You are merely telling the DOM that this is
a table cell, exactly as if you had use <td>. Sometimes extraction of
presentation from content can be taken too far.