Setting size of a web page

Topic

New Reply

I’ve been asked to set up a gallery of club photos for the club anniversary year.
I plan to do it by having a page of thumbnails, each of which opens the full size photo on a new page when clicked.
As it works at the moment, the new page is full size so the majority of photos do not fill it.
I really don’t like having a photo tucked away in a corner of a large, otherwise empty page, so how can I set the size of the target page to be the size of a photo (bearing in mind that a large percentage of them are of differing sizes)?

The current HTML I use to display the full size photo is

Thanks
Silverback

Reply | Quote

Replies

Hi Silverback

If you are OK with CSS you could try something similar to this, between tags in the type:

img { height: 60px;
         width:   80px;
        }
.slot{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	float: left;
	width: 75%;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	padding-top: 5px;
	padding-bottom: 5px;
	background-position: top;
}
.leftgal{
	float: left;
	width: 50%;
}

Now create the tag soup to be like this

  

Stuff 
   
Club photo's

		
		
		

It gives a view of the images like so but tiled down the page each being 60 x 80 pixels in size

Reply | Quote

Hi Jerry
Thanks for your reply and apologies for not replying to you earlier. Got a bit of an excuse, though. After your posting arrived, I fell off a ladder (only two rungs up) and it shook me up a bit. Nothing broken though, just a couple of bruises. Now – I hope this isn’t going to happen every time you post me a reply!
I’m not sure if I’ve mislead you/everyone with my posting. Not being fluent with CSS, I can’t work out exactly what your example does. What I’m trying to do is size the page that the full size photo opens in. Is this what your example does? If it is, I can’t work out which lines are doing the sizing.
Just to be absolutely clear – I’m not so bothered about the thumbnails. I want the target page holding the full size photo to be just the size of the photo – and this will need to change because the photos are differing sizes.
Sorry to be dumb
Silverback

Reply | Quote

If I have fully understood your intention, it seems you wish to resize the user’s window to the image size. My understanding is that if you do this, at least in a tabbed browser like Firefox, you permanently resize the browser window, so that the user then has to resize it again to his/her/its preference. This is a pain!
I tend to avoid sites that play around with my preferences; to change a user’s window size (or other settings) without permission is to me unacceptable practice, although I’m sure others will disagree…

Chris

Chris

Reply | Quote

I totally right Chris, resizing of windows is an absolute no no and totally unnecessary these days. One of my colleagues at the College always makes me laugh when she says “It is very rude”.

My CSS suggestion creates a series of thumbnails (admittedly I read the OP slightly differently) which open to a larger image and funnily enough this was the precursor of Jeff’s suggestion in post 707,469 on using Lightbox 2 , where I have used that exact application/script to open the image. It really is good as it is a mixture of CSS and javascript and very intuitive once you have got over the initial design of your site, but the little pain it produces is well worth the effort

Reply | Quote

Yes, I almost used the words of your College colleague, but thought they might be considered rude! But I do hate anybody messing around with my settings!

Chris

Reply | Quote

As well as Lightbox, I stumbled upon photo revealer

Seems to do a similar job

Reply | Quote

Johbot
As mentioned in my reply posting to Jefferson, I am going to try to get lightbox going – I like its GUI slightly better than photo revealer – but thanks very much for taking an interest in my posting.
Silverback

Reply | Quote

(Edited by jscher2000 on 22-Apr-08 12:38. Links are hard to post in the Lounge!!!)

One common way to do this is to use the JavaScript window.open() method. So for example, your link would look like this:

Then your page would contain a function to display a new window:


function popWin(link) {
window.open(link.href, "", "width=770,height=550");
}


Of course, as you can see, this assumes that the images are a consistent size. If the images are a bunch of different sizes, then this approach doesn’t work very well — you will end up with scroll bars here and there. If you want to code the size of each image into your thumbnail page, you could do this:


function popWin(link,w,h) {
window.open(link.href, "", "width="+w+",height="+h);
}


Note that I haven’t tested that. In some cases, the window might end up being bigger than the monitor’s maximum resolution, so ideally your script would check that first and downsize to the maximum. It’s becoming more work…

An alternate approach is to build some intelligence into your target window by displaying the images in a web page rather than just displaying the image file. Once the image is loaded, the page can resize the window to fit, again using a script.

Finally, if you haven’t seen this script, check it out. It’s very cool. In some cases, better than using a new window. Lightbox 2

Added: Okay, I couldn’t resist testing the script. Because browsers add a certain amount of default margin around pages, including images, you need to add some pixels all around when sizing your window. You can do this in the script so that when you write out you links, you are using the exact dimensions without having to do too much math.


function popWin(link,w,h) {
w += 12; h+= 12; // improve fit in window
window.open(link.href, "", "width="+w+",height="+h);
}


Hope this helps.

Reply | Quote

Hi Jefferson
Thanks for your reply; I am, in the first instance, trying to get the popwin suggestion going before I try the super
smooth lightbox method.

I am a complete novice at web stuff; I inherited the website and make changes by either repeating what was
already there and just editing the text or copying somebody else’s code. I was, therefore, not at all certain
about your posting as it seemed to be missing some quotes and >, < signs, because when I put it into my
HTML, both the call and the function declarations just appeared as lines of text.

I’ve fiddled around with it (probably incorrectly) and have finished up with this :

as the function declaration and this :

as the call.
I no longer get errors when running this and the thumbnail is displayed correctly but the full size picture
still appears in the top left hand corner of an otherwise blank new window.

I am assuming that the onclick parameter is not being implemented and the code is behaving as if it was
not there at all.
Can you point me to why this is, please?

Thanks
Silverback.

Reply | Quote

(Edited by jscher2000 on 27-Apr-08 13:03. )

[indent]

---

I am assuming that the onclick parameter is not being implemented and the code is behaving as if it was not there at all. Can you point me to why this is, please?

---

[/indent]
Hard to say. I assume this page is not on the web for testing. If you are running it locally, IE may have disabled the scripts. IE will indicate script errors in the lower left corner of the status bar. Firefox doesn’t have security zones like IE, but the NoScript extension will block scripts from file:// unless you allow them. Firefox lists script errors in the Error Console on the Tools menu.

Added: It’s hard to be sure whether it’s the Lounge or your code, but in your post there is a after the closing }. Those should not be there.

Added: Here’s a demo: http://sothai.com/photos/poptest.asp%5B/url%5D

Reply | Quote

Jefferson
Thank you for the demo page! It’s solved the prob. By comparing very carefully your href line and mine, I eventually found that I had typed popwin (no upper case W) so it wasn’t calling the onclick routine. A quick edit – and now my thumbnail opens a sized window.
Now you have shown me how to do this, I intend to build a page which will at least allow people to see the photos; this will be my backup. Then, I shall try to implement the lightbox method which I think is uber cool – but I will at least have a fallback position. Will report back on attempts to implement lightbox.
Thanks so much for your help.
Silverback

Reply | Quote

Oops – found a little problemette with the onclick – popwin method.
How can I get a caption on the photo in this new window i.e. the people who are in the photo, please?
(I realise that lightbox allows for just this – but I did want to get the page sorted using this method before I try lightbox)
Thanks
Silverback

Reply | Quote

When you display the .jpg file directly, there’s no way to add a caption. You would need to insert the image and caption into a web page. Can you store the caption information in the link’s ALT tag? Then you could build page on the fly. I’ll post an example when I get a chance.

Added: Okay, here’s the quick demo. It doesn’t bother with web standards, it ain’t pretty, but it works.

http://sothai.com/photos/poptest2.asp%5B/url%5D

Reply | Quote

Jeffeson
Thanks for this. The page is coming along nicely.
One last ask on this method – is it possible to center the ALT text in the target window?
Thanks
Silverback

Reply | Quote

You can center the contents of the new document by adding a style tag (typed here, not tested):

newWin.document.write(""+cap+"");

Reply | Quote

You are the tops!
Thanks
Silverback

Reply | Quote

I’ve chosen not to show a “full” size photo in a web page, because the full size is 2MB per photo, and I didn’t want a viewer to wait that long (at least in Australia). The medium size pic is a compromise between quality and download time.

I’ve implemented this approach at my Subway home page.

I guess I could have the option of people clicking on the larger image to get a really full size image. For my application, it’s not worth it. But it would be easy to implemen- using techniques already mentioned.

Reply | Quote

Agreed about “full size” images. I find 2 megapixels (1600×1200) to be a nice size for “full size” on the web, and much more manageable for uploading. What always puzzles me is how many bytes little thumbnails can require…

Gratuitous sample gallery page (approx. 730 KB of thumbnails): http://thailand.jeffersonscher.com/photos/Ranong2.asp%5B/url%5D

Reply | Quote