PDA

View Full Version : Problem with thumbnailviewer and IE 10



jdits
04-22-2013, 01:22 PM
When I click on a picture to enlarge IE 10 brings up the picture in a new window. When I click on "compatibility view" it works fine. Any ideas? Thanks.


--JD

jscheuer1
04-22-2013, 01:53 PM
Please include a link to the page on your site that contains the problematic code so we can check it out.

Is this a Dynamic Drive script? If so, which one exactly? There's a Thumbnail Viewer and a thumbnail Viewer II script here.

And if it is a DD script, also please post the URL of its DD demo page.

I just checked both of the DD Thumbnail viewer scripts here in IE 10, they both worked fine.

jdits
04-22-2013, 02:08 PM
// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Play()
}
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
showcontainer.filters[0].Stop()
}
},

hideimage:function(linkobj){
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
showcontainer.innerHTML=""
},


cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
this.showcontainer=null
for (var i=0; i<this.targetlinks.length; i++){
this.targetlinks[i].onclick=null
this.targetlinks[i].onmouseover=null
this.targetlinks[i].onmouseout=null
}
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
this.preloadedimages[this.preloadedimages.length-1].src=pagelinks[i].href
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
}
}
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
}
if (this.hideimgmouseout)
pagelinks[i]["onmouseout"]=function(){
thumbnailviewer2.hideimage(this)
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP


} //END init() function

}


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.alreadyrunflag=1
thumbnailviewer2.init()
}
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

jscheuer1
04-22-2013, 03:02 PM
.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

Where you have:


<script type="text/javascript" src="js/thumbnailviewer2.js" defer="defer"></script>

It needs to be:


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

If I had to guess though, I would say try removing defer="defer" from the script tag.

jdits
04-22-2013, 03:03 PM
Just an update:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

the three pictures I click on the site brings up a new window as well.

jscheuer1
04-22-2013, 03:20 PM
Yes, they do in all browsers. Those are mouse over trigger images, you're not supposed to click on them. Their clicks can be disabled though. If you just move your mouse over them they work fine.

The links below that are click triggers, those also work fine in all browsers.

I see you're using an older version of this script. So if my idea about the defer doesn't fix it for you, update to the new version. You may have to comment out its jQuery.noConflict(), directive - it's near the top of the script and use it with your existing jQuery script rather than add another version of jQuery to the page.

jdits
04-22-2013, 03:21 PM
Even even more strange. The mouseover works on your site. Just not the click. I am sifting through security settings and see if I can come up with a solution.

jdits
04-22-2013, 03:23 PM
Yes, they do in all browsers. Those are mouse over trigger images, you're not supposed to click on them. Their clicks can be disabled though. If you just move your mouse over them they work fine.

The links below that are click triggers, those also work fine in all browsers.

I see you're using an older version of this script. So if my idea about the defer doesn't fix it for you, update to the new version. You may have to comment out its jQuery.noConflict(), directive - it's near the top of the script and use it with your existing jQuery script rather than add another version of jQuery to the page.

I will try that.

jscheuer1
04-22-2013, 03:28 PM
If you update, be aware that the syntax for the rel and rev attributes of the trigger links have changed.

If you have any problems with that, let me know.

But the:

-Old Stadium
-Amsterdam
-Country Side

links on the demo page work fine in IE 10 here.

jdits
04-22-2013, 04:02 PM
If you update, be aware that the syntax for the rel and rev attributes of the trigger links have changed.

If you have any problems with that, let me know.

But the:

-Old Stadium
-Amsterdam
-Country Side

links on the demo page work fine in IE 10 here.

Ok I got the new script in. This is what I have:


rel="enlargeimage" rev="targetdiv:loadarea"

I had this with old script:


rel="enlargeimage::click" rev="loadarea"

Now It works with mouseover/fade just great with IE 10 and normal view. Now I just need to change the option for click and it should work.

jscheuer1
04-22-2013, 04:38 PM
That would be:


rel="enlargeimage" rev="targetdiv:loadarea,trigger:click"

If you have any problems with it, give me a link to a demo. I just refreshed one of the live pages and it's still using the old syntax and script.