PDA

View Full Version : Thumbnail Viewer Script - pops up behind navigation menu



mylcorp
04-11-2013, 10:08 PM
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 www.abetterquilt.com/portfolio/customer-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
04-12-2013, 08:23 AM
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
04-12-2013, 03:30 PM
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
04-12-2013, 04:17 PM
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
04-12-2013, 05:41 PM
Thank you for the z-index setting- problem solved!

jscheuer1
04-13-2013, 04:48 PM
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
04-13-2013, 05:08 PM
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
04-14-2013, 02:12 AM
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: www.abetterquilt.com/portfolio/customer-quilts.htm

jscheuer1
04-14-2013, 02:30 AM
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
04-28-2013, 12:18 AM
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.

jscheuer1
04-28-2013, 02:05 AM
There might be. However, I have a version of this script where, if an image is clicked before all the others are loaded, before the page is loaded even, it still works as expected. I believe this to be a better approach. Try it out:

http://home.comcast.net/~jscheuer1/side/demos/thumbnailviewer/quilts-h.htm

The update was introduced here:

http://www.dynamicdrive.com/forums/showthread.php?40219-Image-Thumbnail-Viewer-(update)&p=177924#post177924

You can copy the script code from there or download it from this link to the script (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/side/demos/thumbnailviewer/thumbnailviewer.js

BTW, I also changed the DOCTYPE to a standards invoking one in order to get hte page to render properly in some browsers where it was not doing so.

Any questions, just ask.