Hi. I’m working on a site for a professional jewelry designer and she has supplied me with a ton of hi-res shots of her items.
I’m building the site in Joomla, and my original plan was to have nice big pictures of the items (500x450 jpegs, about 70k average) in their individual galleries (rings, necklaces, earrings, etc.). Only now I am rethinking things a bit and have become hung up on site & page loading speed.
My questions is this: I’ve been doing this long enough to know that there are a lot of judgement calls when building the ideal site–whether to continue to bow to IE6, optimal screen resolution, font issues, etc. But is there a general consensus regarding the ideal page size?? How big is considered too big? I want to find the sweet spot between showing these awesome professional images & not losing users with slow connections.
My suggestion would be to have an image gallery of small thumbnails. The larger pictures would only be loaded when someone clicks on the thumbnail. I prefer that to downloading all of the images on page load. This can be handled nicely with some simple, unobtrusive JS. I’ve just finished a site for a calligrapher that has nearly 80 pictures on the Gallery page, but each one is just loaded when the thumbnail is clicked. I used this site as my model:
Awesome. Thanks. I didn’t want to go the thumbnail route initially. My thought was that it would be an extra click in the process. But realistically I think avoiding a giant slow-loading page probably trumps that concern.
You can also do rollover effects over the thumbnails rather than clicks. You can preload the large images in the background with Javascript, but load the thumbs quickly. when the thumbs are moused over the larger image will appear.
You can also get creative with an image map. Take a single image of several pieces of jewelry, then when a single item is moused over the larger image appears. This is useful for displaying collections but still letting the user see individual pieces in detail.
OK, so I plugged the JS from the page above into my galleries and they work great. In every browser but IE 6 & 7, of course.
In those two it just jumps to a blank page with the large image when you click on the thumbnails. Does anyone have any idea why this script would work in every browser but 6 & 7???
The gallery does work in IE6 and 7, but the first time I used it I had the same problem. After some debugging, I found that IE was getting confused because there was a variable that had the same name as an ID–I think it was “description”.
So I changed the ID to “desc” and all was well.
If that doesn’t help, perhaps post a link (or PM it to me) so I can take a look.
PS
There is one other bug in IE6 that I haven’t gotten around. If the enlarged images have different sizes, IE6 tries to size them all like the first one. A pain indeed, but I’m about done with IE6 anyway.
You’re the man. Thanks a million. I’ll give that a try.
I know what you mean about IE6. I decided to put my foot down and stop worrying about it with a new site I’m designing. I posted some pages for the client to look at and she wrote me back with “Why is there a white box around the logo at the top?” Grrrrr!! Damn IE will be the death of me.
Yes, IE sure spoils the party. Did you sort it out? I always find out what browser the client is using before I get too excited, and then check out what they will see before I send them something to look at.
Not yet. I’m ashamed to say I don’t quite know the difference between variable & ID syntax-wise. Learning Javascript is on my pull-your-head-out-of-your-ass-and-learn-it-already list. I’m just gonna cut & paste until I get it right.
Sound advice to find out what browser the client is using. However this assumes that the client knows what a browser is. This is an assumption I held until recently as well. The last time I asked a client exactly what browser she was using the reply I got was “Windows 7”.
Id’s would refer to dom elements:
<div id=“description”> some div </div>
The most direct way Javascript finds an element in the DOM is with
document.getElementById(“description”);
which is usually put into a variable:
var description = document.getElementById(“description”);
That IE opens up a new window/tab with the large image is actually good: this is what the rest of us, who don’t have JS, should be getting too. Of course it’s more work, but that’s the point: the working original is, click on the thumb and get a large image opened up. The JS enhancement is, see the large image without new tabs or windows, and so also no back-button clicks.
If IE6 users get the default behaviour, that’s really not a bad thing. They are just missing out on a goody extra.
I’d prolly try to fix it though if the default behaviour didn’t work. Meaning, if IE6 users couldn’t see ANY enlarged photo. IE6 users buy stuff still. : )
The last time I asked a client exactly what browser she was using the reply I got was “Windows 7”.
Aha! But that likely means they have IE8 : ) If they dunno what a browser is, they ain’t gonna have FF or Opera or any other, an Win7 comes with IE8. So, you got lucky with the OS this time!
Thanks. Crazy as it sounds, I got it to work. I just swapped out “desc” for anything that looked like an ID to me (I think there were about 4 or 5). And lo and behold it now behaves the way I want in 6 & 7.
Oh and let’s set it up that all web devs in the world go out for drinks on the day that IE6 finally dies a horrible bloody death. I’ll buy the first round.
This gallery is designed to do that when people have JS turned off. But that shouldn’t happen if JS is turned on.
Yep, that’s what I found by trial and error. Sorry my explanation wasn’t clearer. Glad you got it yourself, though (it’s SO much more satisfying, isn’t it!)
On the matter of client browsers, I usually meet with them, and always flash a glance at their browser to see what they’re using. I recently struck one using IE6, but convinced him to upgrade to IE8 before showing him any designs. Couldn’t push him as far as Firefox, though.
