View Full Version : Image Thumbnail Viewer Improvements?

06-26-2007, 02:52 AM
1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem:

These aren't problems, so much as suggestions for whomever wrote the script to make modifications to it to make it better. Suggestions:

A) When typing in text, if the amount of text is too large, then the text does not wrap and the border around the image expands which ruins the appearance.

B) The script should detect the size of the large image to be loaded. If the image is too large for the screen resolution, the image should be resized to make it fit in the browser window.

Actually, suggestions A and B are related. If one detects the height and the width of the image to be loaded, then the width can be used to set the width of the div element holding the text, and the height or width can be used to determine whether an image should be scaled down.

I modified the original code to include a div element around the text (my edits are in bold below). In the first approach, I used the image width and style.width to set the width of the div "forText". However, two problems arose. First, one of the images appears off-centered in FF, which is related (I believe) to the bug noted in the code. Second, "line breaks" appear occasionally for each word so that, for example, text with four words will appear on four lines. If I hit the corresponding thumb again, all of the text appears as it should, on one line. In my second approach (more for confirmation of method), I just set a hard value for the div width and the text behaves properly and there is no centering problem in FF.

Here's what I think needs to be done:
-detect the screen resolution
-detect the width and height of the image to be loaded
-if the image is small enough for the screen resolution, set the width of the div element for the text equal to the width of the image.
-if the image is too large for the screen, set either width or height in the img tag to an appropriate, scaled value. (Although scaling a large image down wastes time and bandwidth, I note that the code as written already loads the large image, so nothing is really lost). I'd make the height of the scaled image to be about 70% of the available height of the browser windown.

I'm sort of close to the solution, but I just picked up a book on javascript a couple weeks ago -- a beginner I am, so it's slow. Thus, I come here for the solution. Not to mention, this is such great code, it would be a shame not to make it as best as it can be. I think these are reasonable suggestions to make the code better.

Here's a link to see how I've modified the script so far (you will need to copy and paste -- sorry):


To obtain the above at ePeakRegister, I changed the loadimage function as follows:

loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"

if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox

var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image

if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?

//FIRST WAY -- put text in a <div> tag and set width of div below using style.width
imageHTML+='<br /><div id="forText">' + link.getAttribute("title") + '<br /></div />'

//SECOND WAY -- text behaves, always on the same line with no breaks until needed as dictated by setting the width below
//var imageWidth= 350-0
//imageHTML+=' <br /> <div style="width:' + imageWidth + 'px">' + link.getAttribute("title") + '</div>'


this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself

//width of div for text is equal to width of image -- MY EDIT HERE

this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!

if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug:



this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over


I also made some trivial changes to the css code:

#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: #E5ECF9;
font: bold 16px arial;
padding: 10px;
line-height: 1.3em;
text-align: left;
vertical-align: top;

Whoever came up with code, great job. However, I think you can make it just a little bit better and more versatile.

06-26-2007, 07:02 AM
Thanks for the suggestions. I wasn't aware that long text will not wrap but instead expand the entire box. Regarding resizing the image dimensions to fit a user's viewable screen, it's certainly do-able. The question is though, how often do people use this script to load very large images? I often envision people using it for mid to small images that look better loaded inline on the page than in its own blank window.

I have a couple of scripts I need to update, and once I'm done with those, I'll look at possibly updating this script for the aforementioned. In the meantime, one script I'm aware of that does resize large images to fit the user screen is this one (http://javascriptkit.com/script/script2/divviewer.shtml).

06-26-2007, 01:37 PM
Thanks for the response and the link. I'll give that a look to see how it might work.

I noticed the issue with resizing when I prepared my images on a 1280x1024 screen at home and then went to my website at work and viewed it on a 1024x768 screen. So, the issue for resizing might come down to the percent of users with different screen resolutions. I found this:


Who knows about the accuracy of the stats, but I think you see where I am coming from.

Thanks again.