OK, I have looked (and Stu Nicholls has some awesome information) for a picture gallery for a slower connection.
I want a gallery (of up to 120 pictures per page - can scroll) that has the SMALL thumbnails (100x75px) showing. then when the user clicks on the image, that image will then load (in a popup window preferably) - pictures are typically over 1M in size at full size by design and thumbnails are about 7-15K in size.
My clients say that their slow DSL connections do not behave well (takes a LONG time to load the page) when I put these size of pictures in the page. So, we have to bide by their decision.
Oh, typically there are more than one of these galleries on the page (can be up to 6 per their request/requirement). Yes, I have tried to talk them out of it, but not successful - yet.
Any leads to an example would be greatly appreciated. Or, if someone can direct me to the code/tutorial to do this, that would be great also.
That is a good page, to get the thumbnail to load, would you want it done in JS? I ask because you say that your clients have slow connections, JS would slow it up, you could use CSS disjointed rollovers
RyanReese, I do not want JS. I don’t like JS and it does seem to slow some sites down. Would like CSS only if possible but not sure how to accomplish this yet.
rguy84, up to 120 thumbnails per “page”. Seems that there is a lot of pictures and these are apparently for and from events. So, I would like to have a “window” for up to 120 thumbnails and, by clicking on the thumbnail, open a separate window for the full size image to be loaded and shown.
Yes, 120 images (1.2mb) seems to be large, but I have seen a couple of sites where the have 500 10K images and the site loads somewhat quickly - as compared to having 500 150K.
So, still asking if there is a site where the thumbs are shown but no loading of the full size image until you click.
If you want that many images and on a slow connection you could just present 120 small thumbnails and target_blank them all (or not) to the large image.
Or using something like fancybox would be a good option. You could call all the images via iframe option and therefore call each image only when called upon. That’s prob your best bet. http://www.visibilityinherit.com/code/jquery-fancybox.php
Or I use this one which ive used on a site of mine. I have 100 images in the photo gallery. Each about 400 x 400 and at a high quality. On high speed it’s about a 5 sec load including all my js. http://www.visibilityinherit.com/code/the-photo-gallery/gallery.php. Regardless fun to look at.
Or you got the jamie Ruth option. If you went this route you could present 20 thumbs in each section and hide the rest. http://www.visibilityinherit.com/code/the-jamieruth.php. Prob not for slow connections again but again fun to look at.
Eric, I can’t tell you how much trouble I got into when my wife saw me poking around on your gallery pages. “But honey, I’m not looking at the pictures, I’m looking at the code.” The bad thing is, I WAS looking at the code.
Here is a way to do it which works well on slow connections. While it uses some JavaScript, the script is very small. I have added the images so that you can build the page and have a play. To keep it simple I have used a single large image size (250 x 300px), but it is easy to modify this basic script to allow mixes of several or many sizes as required.
This example uses a single column scrollbox, but in practice you would use three or even four images wide. The thumbnails used here are 100 x 100px, but they can be any convenient size.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Gallery</title>
<script type=“text/javascript”>
<!–
// apply onclick handlers to thumbs
function init()
{ // shortcut to target div for large pic
var target=document.getElementById(“targImg”);
// get all thumbs into collection
var holderObj=document.getElementById(“holder”);
var allThumbs=holderObj.getElementsByTagName(“img”);
// apply onclick handlers to imgs
for(var i=0;i<allThumbs.length;i++)
{ allThumbs[i].onclick=function(){
var newSrc=this.src.replace(“_sml”,“_lg”);
target.src=newSrc;
}
}
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; color:#000; font-weight:normal; font-size:13px; text-align:center; margin-top:3px; margin-left:0px; } #wrap { position:relative; top:0px; left:0px; width:620px; height:500px; margin:0px auto; border:1px solid #666; } #picL { position:absolute; top:50px; left:50px; text-align:left; } #outer { position:absolute; top:50px; right:50px; width:125px; height:220px; clip:auto; overflow:auto; border:1px solid #000; background-color:#000; } #holder { position:relative; top:2px; right:0px; width:100%; height:450px; text-align:center; } #holder img { cursor:pointer;margin-top:2px; }
–>
</style>
</head>
But most work that way. Loading the full image as well is optional. just link to the full image and call it when the user wants to see it.
but again, calling a 1mb image will always be a slow process for someone on a slow connection. Your worries about javascript slowing things up a bit are trivial compared to the effect your images will have.
I think you’ve been looking at some galleries that load all images full size then reduce them for the thumbnail, and got the wrong impression that they all work that way. You mention Stu’s site - he has a few that do that, and that sort of gallery is intended for a small number of images.
Here’s a lightbox, with thumbnails loading, and main images only being loaded when the user requests them
copy any/all the code you need, but it uses the older version of slimbox, based on mootools. google on slimbox2 for the slimmer version using jQuery, and if you use the google version of jQuery, peopl eare likely to have it cached from other sites and hence it will load faster still. The images there are 200px wide, to give a reasonable initial view of the image.
The key here is to minimize the http requests. You could do that by combining all gallerie’s thumbs on the same page in one large image file.
Then show just that piece of the large thumbs-image that corresponds with the linked big image. You could do it like this if you also want a side scrolling row of thumbs: (The huge negative margin is what enables the list to grow wider than its container. N.b. Opera has a total scroll width limit of 32767px!)
I REALLY like the site you sent. I am going to see how to put that into some of my stuff.
Eric,
Hmmmm… agree with Dr. John about your wife and your website. Nice site by the way. Just tried to figure out your example. Not understanding how to make one bit image out of all the little ones. Maybe bad brain day but just don’t understand that part.
Thanks to both of you - just wish I had 10% of your experience/knowledge.
Don’t underestimate yourself. I’m not smart (book smart at least), I’m just determend. All those examples and sites I had to stare at that code for a long time to get things the way I wanted.
Aside from just linking to the larger image, I still think a lightbox is your best bet. The one Dr John linked you to is a real good one (looks like the original jquery lightbox) or fancybox would be the other best one. Both give you the option to set them up as galleries with next/previous arrows. Additionally, Fancybox gives you the option to call the image via iframe. This means the big image is not embedded on in the page. It’s just sitting in some folder somewhere. Therefore it has no impact on the original page load. Don’t remember if you can set it up as a gallery though this way. May just be one image at a time this way (ie no next/previous arrows).
Not understanding how to make one bit image out of all the little ones. Maybe bad brain day but just don’t understand that part.
To follow my suggestion to minimize the http requests for all thumbs to only one, you should make one big image that is containing all thumbs.
You could do this in a simple image editor. For 120 thumbs, load the first thumb, resize the canvas to e.g. 10 by 12 times the size (e.g. for 100x75, grow canvas to 1000x900). Now you have the first thumb in upper left corner. Then copy paste next thumb in place next to the first, and so on. When all thumbs are pasted in place, save with high compression. (Note that re-saving a loaded jpg will decrease quality noticeable each time, use e.g. png for intermediate saving and only save as jpg from the final png.)
It is worth the effort, loading time will go down significantly!
If you want another scroll-box than the horizontal, a multi columns vertical scroll for instance; just use the ul itself as the gallery container and set dimensions and overflow to it, and the items will be growing downwards scrolling.
