Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Problem with thumbnailviewer and IE 10

  1. #1
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with thumbnailviewer and IE 10

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 04-22-2013 at 01:57 PM. Reason: merge
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    // -------------------------------------------------------------------
    // 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")
    Last edited by jdits; 04-22-2013 at 03:04 PM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, 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:

    Code:
    <script type="text/javascript" src="js/thumbnailviewer2.js" defer="defer"></script>
    It needs to be:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just an update:

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

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Apr 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
     rel="enlargeimage" rev="targetdiv:loadarea"
    I had this with old script:

    Code:
     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.

Similar Threads

  1. IE error when using Thumbnailviewer 2
    By azoomer in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-10-2010, 10:26 AM
  2. thumbnailviewer.js
    By sprog in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-26-2009, 06:12 PM
  3. thumbnailviewer and lightbox in one script
    By Gerard in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-31-2009, 07:01 PM
  4. thumbnailviewer
    By colorinotturni in forum JavaScript
    Replies: 1
    Last Post: 03-14-2008, 03:49 PM
  5. need help editing thumbnailviewer.js
    By dmccaulley in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 02-26-2007, 04:18 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •