Image Thumbnail Viewer II [Archive]

hansn484

08-13-2013, 02:16 AM

Old Script: I don't have a link but script has header with Last updated: Feb 5th, 2007
New Script: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

I just inherited a website that is having issues with the thumbnail2 viewer in certain IE browsers. I can confirm it's broken in 10. It works in 9 definitely, and it works in 10 with Compatibility mode on. It works fine in Firefox and Chrome.

After googling I found this post and made the updates:
http://www.dynamicdrive.com/forums/showthread.php?73897-Help!!!-Thumbnailviewer2-js-not-working-with-IE10

I have created 2 pages, one with all the original syntax: http://www.nathanhans.com/odysseypicold.html , and the new page with new syntax: http://www.nathanhans.com/odysseypic.html

I also read some other posts and read comments about proper attribution. I realize it's missing in the orginal page, and I promise I will make the necessary changes to any pages I find without the proper attribution, as I have done in the new page.

Thanks.

-Nathan Hans

jscheuer1

08-13-2013, 02:41 AM

The second demo (odysseypic.html) is missing jQuery, which is required by the newer version of the script. As a result it doesn't work in any browser. Add the highlighted as shown:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>"Odyssey" Series</title>
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="thumbnailviewer2new.js">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
<!--
body {
background-color: # . . .

After adding that it should work fine in IE 10 as well as others.

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

Note: The way the second demo is currently setup, once working the viewer will be activated onmouseover, not click. In fact, if you do click, it will take you directly to the image. This can be overridden such that it won't happen by adding this code after the thumbnail script's external tag:

<script type="text/javascript">
jQuery(function($){
$('a[rel="enlargeimage"]').click(function(e){
e.preventDefault();
});
});
</script>

Or one can simply add the trigger:click property/value pair to the rel attributes of the trigger links to have them activate on click.