Image Thumbnail Viewer II -- Photos not responding to "mouseover" in IE9

**CookieMonster** · 05-06-2013, 08:49 AM

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: I used this script for years and loved it. Today I realized it is no longer working in Internet Explorer 9 (but it does work in the other browsers I tried). I went back to Dynamic Drive and saw the script was updated, so I started to implement the changes. With both the old script and the new script all the thumbnails display but mouseover does not work in IE9. Instead, I have to "click" on the thumbnails, which then takes me to a blank white page displaying the photo in the upper left. I thought I had installed the new code correctly, but since the example is working for me on the Dynamic Drive website in IE9, I clearly have something wrong on my website. (Either old or new script will work in Compatibility mode, but I want it to work without using Compatibility mode.) I do have thumbnailviewer2.js and the spinningred.gif uploaded to my server. I did remove the copyright message for the right-click code in case it was interferring, but that did not seem to make any difference, so I left it in here so that you could see what I am fully working with. I greatly appreciate any help to get mouseover to work in IE9! Here is my code for the entire page (and then I have more commentary at the end of the first set of coding):

Code:

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.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>

</head>

<body bgcolor="#21231F">

<script language=JavaScript>
<!--

var message="Photos Copyright";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// --> 
</script>

<table border="0" width="100%" cellspacing="0" cellpadding="0" height="966">
  <tr>
    <td width="15%" height="36"></td>
    <td width="70%" height="36">
      <p>&nbsp;</td>
    <td width="15%" height="36"></td>
  </tr>
  <tr>
    <td width="15%" height="871"></td>
    <td width="70%" bgcolor="#000000" height="871">
      <table border="0" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td width="100%" colspan="3">
            <table border="0" width="100%" cellspacing="0" cellpadding="0">
              <tr>
                <td width="17%">
                  <p align="center"></td>
                <td width="83%"></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td width="19%">
            <p align="center"></p>
          </td>
          <td width="81%" colspan="2">

<table border="0" width="100%" cellspacing="20" cellpadding="0">
  <tr>
    <td width="12%">
    </td>
    <td width="76%" align="center">

<div id="loadarea" style="width: 692; height: 461" align="center">
<p align="center">
<img border="0" src="images/11.jpg" width="692" height="461">
<br>
<font color="#FFFFFF"><font face="Arial" size="3">
<br>
Please select a photo.</font>
</div>    
    </font>    
    </td>
    <td width="12%">
    </td>
  </tr>
  <tr>
    <td width="12%">
    </td>
    <td width="76%">
      
     
  <p align="center">


<font color="#FFFFFF">

<a href="images/1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/1thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/2.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/2thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/3.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/3thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/4.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/4thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/5.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/5thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/6.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/6thumbnail.jpg" width="80" height="80"></a></font>

</p>

      
  <p align="center">

<font color="#FFFFFF">

<a href="images/7.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/7thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/8.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/8thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/9.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/9thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/10.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/10thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/11.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/11thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/12.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img border="0" src="images/12thumbnail.jpg" width="80" height="80"></a>&nbsp;
</font>

</p>


    </td>
    <td width="12%">
    </td>
  </tr>
  <tr>
    <td width="12%">
    </td>
    <td width="76%">
      
        
        <p align="center"></p>
      
    </td>
    <td width="12%">
    </td>
  </tr>
</table>


          </td>
        </tr>
        <tr>
          <td width="19%"></td>
          <td width="47%"></td>
          <td width="34%"></td>
        </tr>
      </table>
    </td>
    <td width="15%" height="871"></td>
  </tr>
  <tr>
    <td width="15%" height="59"></td>
    <td width="70%" height="59">
      <p align="center"></td>
    <td width="15%" height="59"></td>
  </tr>
</table>

</body>

</html>



*****When I try to replace part of the code with this, which I think is the updated version, it does not work in IE9 or Mozilla Firefox, the only two I just tested:


<font color="#FFFFFF">

<a href="images/1.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/1thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/2.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/2thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/3.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/3thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/4thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/5.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/5thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/6.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/6thumbnail.jpg" width="80" height="80"></a></font>

</p>

      
  <p align="center">

<font color="#FFFFFF">

<a href="images/7.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/7thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/8.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/8thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/9.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/9thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/10.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/10thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/11.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/11thumbnail.jpg" width="80" height="80"></a>&nbsp;
<a href="images/12.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes"><img border="0" src="images/12thumbnail.jpg" width="80" height="80"></a>&nbsp;
</font>

</p>

******What am I doing wrong when I am trying to implement the new coding style?

**jscheuer1** · 05-06-2013, 02:48 PM

The new coding style also requires that you download and use the new version of the script and get rid of the old version of the script.

The new version also requires jQuery. Instructions as to how to set that up are in Step 1 on the demo page.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

**CookieMonster** · 05-11-2013, 09:58 AM

Thanks for the reply. I was doing something wrong when adding the thumbnail. I figured it out. It works great! :-)

**jscheuer1** · 05-11-2013, 02:59 PM

I don't see anything wrong with the code for the thumbnail links, out of curiosity, what was it?

**CookieMonster** · 05-13-2013, 09:58 AM

Originally Posted by jscheuer1

I don't see anything wrong with the code for the thumbnail links, out of curiosity, what was it?

Now I'm not so sure, either! :-) Maybe something was caught in my cache, because the thumbnail code I submitted to you is actually the same one I am using, I just realized. I did have to delete a second jquery on my site that was for a navigation menu. The new one from your script makes both of the scripts work. So, I'm sorry I cannot satisfy your curiosity on what was exactly going wrong for me, because I did have the jquery there and all the new files uploaded when it "wasn't" working for me, but it is working now, and the only thing I did was delete that second jquery (which still did not have it working fully) and redo the thumbnail scripts. If I figure out what I thought I did differently that night, I will reply back.

**jscheuer1** · 05-13-2013, 01:21 PM

Right, having a second copy of jQuery on a page can often break a script that's using the first copy because anything that the first script added to jQuery is potentially wiped out. And if the second jQuery is a different version, some syntaxes might be changed. There are ways to code to prevent both of those from happening, but it can get tricky. So if all your scripts on a page that need jQuery can run off of one jQuery, that's usually best.

The thumbnailviewer2.js file has this directive in it:

Code:

jQuery.noConflict()

If you have only one jQuery on the page and are not using any other script or script library that needs $ to be something else than the jQuery $, that directive can be commented out or removed. Sometimes it has to be removed to get all the jQuery dependent scripts to work right.

**CookieMonster** · 05-13-2013, 09:32 PM

Thanks for the additional info! :-)

**KyVangeloff** · 05-24-2013, 06:36 PM

Hello,

I am new to this forum so please bear with me. I have been attempting to use this script and have successfully implemented it into my html code. The main reason I ended up with this script vs. any other rollover gallery script is because the enlarged picture is clickable to a desired link. The only problem I am having is that I would like the link that I click to open up in a different tab. I know I can use the target "_blank" in a regular html link but this script works differently. Could anybody assist me on making this possible. Thanks.

**jscheuer1** · 05-25-2013, 02:30 AM

Even though this is probably the same script, since it's a different question it should be in its own thread. Even if you think it's the same question, a new thread should be started. The only real reason to add on to an existing thread is to help resolve it. In the future, please post any question in a new thread.

That said, add this script to the head of the page, after the ones for Thumbnail Image Viewer II:

Code:

<script type="text/javascript">
jQuery('#loadarea a').live('click', function(e){window.open(this.href, '_blank'); e.preventDefault();});
</script>

where loadarea is the id of the div where the larger images are shown.

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

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Thread: Image Thumbnail Viewer II -- Photos not responding to "mouseover" in IE9

Thread Tools

Search Thread

Image Thumbnail Viewer II -- Photos not responding to "mouseover" in IE9

Problem solved

Similar Threads

Combining "Featured image zoomer" "and "Image thumbnail viewer II"

Combining "Featured Image Zoomer" and "Image Thumbnail Viewer II"

Image Thumbnail Viewer- Adding a "Print Page" option.

How to combine "Scrollable Menu Links" with "Image Thumbnail Viewer II"?

Bookmarks

Bookmarks

Posting Permissions