Listing thumbnail images with link to actual image--better way?

[jsteph]

Hi all,
I have a simple picture viewing site where, via ASP, I generate an html page with a table that has thumbnail images in <img> tags in each cell. Cliking the <img> brings up the main picture corresponding to that thumbnail, in a separate frame.

The problem is that if I have, say, 100 images per page, even though they're tiny thumbnails it takes a while to load. It's as if there is a separate call to load each thumbnail--I see the status bar's rapidly blurring text as each thumgnail loads as the main page loads.

There's got to be a better way. I'm thinking along the lines of a single image of all the thumbnails, but with 'hotspots' so clicking on a specific 'thumbnail' portiong of the image would bring up the corresponding image.

Has anyone seen this done or have any suggestions to make the page load faster?
Thanks,
--Jim

 

[gmmastros]

I suspect that your problem is caused by the images.

When you display an image, the entire image must be transferred from server to the client's browser. So, suppose you have a really large image, but you use the height and width attribute of the IMG tag to make it appear as a thumbnail. The entire file must still be transferred to the client browser.

Typically, images taken from my 5 megapixel camera weigh in at about 2.5 megabytes per image. If I resize the image to 60 pixels wide, it takes about 2 or 3 kilobytes.

So, if I place the 2.5 megabyte picture in a web page and 'resize' it with the image tag, guess how much of the 2.5 megabytes needs to be downloaded. Yup. All of it.

The right way to do this is to store each image twice. Store the original and a re-sized thumbnail image. Actually, I like to store 3 copies of each image. I store the original, a 60 pixel wide thumbnail, and a 300 pixel wide (medium sized) image. This way, I still have the originals is someone wants to download the image and make a print. The 300 pixel version is nice for displaying on a web page, and the 60 pixel wide version is nice for thumbnails. It may take a little more storage space, but the re-sized versions don't take much room, so it's no big deal really.

Hope this helps.


-George

"The great things about standards is that there are so many to choose from." - Fortune Cookie Wisdom

 

[johnwm]

What size are your thumbnail files? On my 'picture intensive' site I use 115px x 86px (quite big) and they are around 2K per image as 70% quality jpegs. I normally stick to max 40 images per page, which gives a page size around 100K, 20 secs on dial up. 100 images should be around 200K which will take around 40 secs on dial-up and around 5 secs on most ADSL connections. If you have 100 on one page maybe the files are smaller.

If you really need 100 images on a page you might consider grouping them and using some AJAX technique to only load the actual bunch as required. Have a look at

http://www.essexsteam.co.uk/avelingT.asp

to see what I mean. This has over 200 pics. I started with straight thumbnails, but when I got to 60 pics I realised it was too slow. This page uses AJAX to do a db query and load the required thumbs on the fly.

If that will help I can post some code for the page for you to modify

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[jsteph]

I'm using thumbnail-sized images for the thumbnails, they're 80x53 pixels, about 2k per image. I do load the complete first or 'default' image though, and each one of those is reduced from a 4MP jpeg to about 300K jpeg. So

My page design is basically grouped by category of photos, but each group has many pictures from 20 to over 100. johnwm, if you could post a code sample I could use as a starting point that would be great.

I'm thinking now along the lines of loading, say, the first 20 thumbnails, then the first display pic, then using a settimeout() to do the rest of the thumbnails as sort of a background load.
Thanks,
--Jim

 

[johnwm]

I use a button to trigger the code. The button is loaded from a recordset containing an ID field for each group of pics.

StrSQL = "Select paraID, parahead, paratext, picserial From paras Where storyid = '0'  Order by paraID desc"
Set rs = ObjCon.Execute(StrSQL)
do while not rs.eof
response.Write("<hr/><p>" & rs('parahead') & "</p>" & rs('paratext'))
mynum=rs("paraid")
temp=rs("picserial")
response.Flush()
response.write ("<button type='button' style='cursor:pointer' value='a" & temp & " id='a" & temp & onclick='showpics(this.id)'>")
response.Write("Show pictures</button>")
rs.movenext
loop
rs.Close
 set rs=Nothing

The JS looks like:

function showpics(str)
{ 
muNum=str
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="getpics3.asp"
str=str.substr(1)
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

and the ASP that actually gets the pics:

<!-- #INCLUDE FILE="objconn.asp" -->
<% 
q=request.querystring("q")
sql="Select count(*) From Pics Where PicType = '"
sql=sql & q & "'"
   Set rs = ObjCon.Execute(sql)
   total=rs.fields(0)
sql="Select mynum,PicTitle, picpath, serialID From Pics Where PicType = '"
sql=sql & q & "' order by serialid"
   Set rs = ObjCon.Execute(sql)
do until rs.EOF

%>
<div class="thumb"><a class="pics" target="_blank" href="bigpic7.asp?myPicID=<%= rs("serialID")%>&amp;myMax=<%=Total%>&amp;myPicType=<%=q%>"><img src="<%="pics/t/" & RS("PicpaTh")%>" 
		  alt="<%= rs("PicTitle") %>"  width="115" height="86"  /></a>
           <p> <%= rs("PicTitle") %></p> </div>
<%
rs.MoveNext
loop
rs.Close
set rs = nothing
response.Write("<div style="& chr(34) & "clear: both" & chr(34) & ">&nbsp;</div>")
 %>

picpic7.asp just displays the full-size version of each individual pic in a new tab.

Come back if it's not clear - you can probably ignore the complicated looking refs to myMax etc in bigpic7 - they are just to allow stepping through the big pics in the set without going back to the thumbnail page.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[jsteph]

johnwm,
Thanks very much. I use the ajax methods in many of my sites, but haven't tried it for this photo site. This may work for me because it will give me some control over when the thumbnails load, which is the main issue.

I think if I do it in the background with a settimeout, that should allow the first picture to load, while the thumbnails load as I go. I'll let you know,
--Jim