Thumbnail Viewer Script - pops up behind navigation menu

[mylcorp]

1) Script Title: Thumbnail Viewer Script

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

3) Describe problem: Images open up behind navigation menu. Is the a way to have them show on top?

Page view at http://www.abetterquilt.com/portfoli...mer-quilts.htm

Also,

Is there a way to add images automatically? All images are renamed with integer + 1 as seen on source page of above.

Thank you in advance

[Beverleyh]

In the thumbnailviewer.css change #thumbBox { z-index:10; } to #thumbBox { z-index:9999; }

When you say you want to add images automatically, do you mean that you want to drop images into a folder and they'd automatically appear on the web page?

You could do it with PHP where you read images from a folder and echo them onto the web page - something like;

    <?php 
    $dh = opendir('path/to/img/folder'); // path to image folder
    while (false !== ($file = readdir($dh))) 
        {
        if (strpos($file,'.jpg',1) || strpos($file,'.gif',1) || strpos($file,'.png',1)) // only include .jpg/.gif/.png
            {     
            if ($file != '.' && $file != '..') 
                {
                 $file_array[] = $file;  
                }
            }
        }
    sort ($file_array); // sort images a-z
    foreach ($file_array as $img) 
        {     
        echo '<a href="http://abetterquilt.com/portfolio/2010/'.$img.'" rel="thumbnail"><img style="height:125px" src="http://abetterquilt.com/portfolio/2010/'.$img.'"</a>'; 
        }
    closedir($dh);
    ?>

This would only work of course if your server is running PHP and you can rename your page to end with .php instead of .html/.htm

If you didn't want to rename your web pages to have the .php extension, and your website runs on an Apache server, and you are able to edit your .htaccess file, you could configure your server to parse html as php: http://php.about.com/od/advancedphp/p/html_php.htm
It makes the server work a little harder but it is a possibility.

[mylcorp]

I do not have PHP
I have all my photos numbered 0001.jpg, 0002.jpg, 0003.jpg etc. to add them to the viewer I must manually add them. I am looking for a way to add the first one:

<a href="http://abetterquilt.com/portfolio/2010/0001.jpg"
rel="thumbnail"><img style="HEIGHT: 125px"
src="http://abetterquilt.com/portfolio/2010/0001.jpg"></a>

THEN have each additional one be added and number changed automatically:

<a href="http://abetterquilt.com/portfolio/2010/(previous + 1) or 0002.jpg"
rel="thumbnail"><img style="HEIGHT: 125px"
src="http://abetterquilt.com/portfolio/2010/(previous + 1) or 0002.jpg"></a>

Any ideas?

[Beverleyh]

To truly automate something I believe you'd need a server-side language, such as php. My php suggestion does exactly what you want so it a shame you cant use it. What other server-side language options do you have on you web account?

I don't imagine you could automate the process too well with JavaScript (if that is the route you specifically want to go) - I believe you would need to define the images in an array, which defeats the object. I could be wrong but somebody else would need to chip in here to confirm as I'm much more comfortable using php.

[mylcorp]

Thank you for the z-index setting- problem solved!

[jscheuer1]

As long as the images are there, and you know how many, and they're all numbered in sequence with no gaps. You can put this on the page in the spot where you want all of the images to appear (untested, should work unless I have a syntax error):

<div id="thumbviewertarget"></div>
<script type="text/javascript">
(function(){
	var numimages = 1000; //set to the number of images
	var basepath = 'http://abetterquilt.com/portfolio/2010/'; //path to image folder
	var ext = '.jpg'; //image extension to use
	var height = '125px'; //height for thumbnail
	var targetdiv = document.getElementById('thumbviewertarget'), curim = 0, link, img, src;
	function padnum(num){
		num += '';
		while(num.length < 4){
			num = '0' + num;
		}
		return num;
	}
	while(--numimages > -1){
		src = basepath + padnum(++curim) + ext;
		link = document.createElement('a');
		link.href = src;
		link.rel = 'thumbnail';
		img = document.createElement('img');
		img.src = src;
		img.style.height = height;
		link.appendChild(img);
		targetdiv.appendChild(link);
	}
})();
</script>

It can be tweaked if need be or if there's a problem.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[jscheuer1]

See my previous post. This version should allow for gaps in the number sequence and allow for setting the number of images higher than the actual number. However, don't set it too much higher, nor allow there to be a lot of gaps in the sequence. Either would waste a lot of time in processing:

<div id="thumbviewertarget"></div>
<script type="text/javascript">
(function(){
	var numimages = 1000; //set to the number of images
	var basepath = 'http://abetterquilt.com/portfolio/2010/'; //path to image folder
	var ext = '.jpg'; //image extension to use
	var height = '125px'; //height for thumbnail
	var targetdiv = document.getElementById('thumbviewertarget'), curim = 0, link, img, src;
	function padnum(num){
		num += '';
		while(num.length < 4){
			num = '0' + num;
		}
		return num;
	}
	while(--numimages > -1){
		src = basepath + padnum(++curim) + ext;
		link = document.createElement('a');
		link.href = src;
		link.rel = 'thumbnail';
		targetdiv.appendChild(link);
		img = document.createElement('img');
		(function(img, link){
			img.onerror = function(){
				targetdiv.removeChild(link);
				link = img = null;
			};
		})(img, link);
		img.src = src;
		if(img && link){
			img.style.height = height;
			link.appendChild(img);
		}
	}
})();
</script>

[mylcorp]

Awesome! Is it possible to tweak script to add vertical and horizontal spacing between images? If not, I can try to add spacing when I resize/renumber images.
Thank you!

page view: http://www.abetterquilt.com/portfoli...mer-quilts.htm

[jscheuer1]

Spacing is really a css issue. The images will all be in the id="thumbviewertarget" div. So in your stylesheet you can put something like:

#thumbviewertarget img {
	border-width: 0; /* prevents default border for any linked image in some browsers that otherwise would do that */
	margin: 3px; /* adds 3px margin all around each image */
}

Green are just comments. You can use a different value for the margin, even use separate top, right, bottom, and/or left margin values. And/or add other styles for the images as desired.

[mylcorp]

Everything is working great except if a thumbnail is clicked on before all images load, close footer and click to close does not function. Is there a way to assure all images load before a thumbnail can be enlarged?
Thank you in advance

Spacing is really a css issue. The images will all be in the id="thumbviewertarget" div. So in your stylesheet you can put something like:

#thumbviewertarget img {
	border-width: 0; /* prevents default border for any linked image in some browsers that otherwise would do that */
	margin: 3px; /* adds 3px margin all around each image */
}

Green are just comments. You can use a different value for the margin, even use separate top, right, bottom, and/or left margin values. And/or add other styles for the images as desired.