Image Thumbnail Viewer II , IE Problem

**360modena** · 11-19-2007, 10:01 PM

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD):

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

3) Describe problem:

I have a problem with this script on Internet explorer, although its the latest version, when I click on the picture, it actually opens the larger source file in a the browser, not within the specified DIV layer.

It works fine with firefox, does anyone know how I could fix this problem ??

It also gives this error on IE > 'this.featureimage' is null or not an object.

Many thanks

**jscheuer1** · 11-19-2007, 10:13 PM

Sounds like you may have a problem with an element on your page with an id that conflicts with the script. To be sure:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**360modena** · 11-19-2007, 10:58 PM

http://www.samuelgertler.com/view_pr...ref/DUBRES1000

here is the page Ive used the script, would appreciate your feedback on it.

Many thanks,
Max

**jscheuer1** · 11-19-2007, 11:56 PM

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.

You have an edited copy of the script:

Code:

var imageHTML='<img src="'+imagepath+' />' //Construct HTML for enlarged image
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image

Your line is red, the original is green. The only reason I can think of to change this is to allow for a style border. However, when you do so, you need to retain the closing " for the src attribute:

Code:

var imageHTML='<img src="'+imagepath+'" />' //Construct HTML for enlarged image

Now, I was experimenting with this locally, and I think you may also need to remove the defer="defer" from the script tag. Otherwise, I was still getting the image alone on the first try, after that it worked. But that might be an artifact of trying it locally with your complex setup. If there are still problems after fixing the other things, get rid of it (red):

Code:

<script type="text/javascript" src="http://www.samuelgertler.com/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>

**360modena** · 11-20-2007, 02:05 PM

Thanks very much john, all working fine now, appreciate it.

Max

**treebot** · 11-20-2007, 07:30 PM

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD):

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

3) Describe problem:

I'm using the same script as the user above, but have a different problem...

I'm using Internet Explorer 6 to view a page that is running the thumbnail JS. When it loads, a security notice pops up, saying, that IE has restricted the active content to protect my computer.

I wouldn't consider this a "problem" rather than a nuisance under most circumstances; however, when I viewed the script page itself (which is running the same JS) as well as the above poster's site (also running the script) in IE, it does not show that warning message.
(This is after I clean out my cache each time.)

There are no other Javascripts running on my page, only a few lines of CSS. Can anyone tell me what the problem may be?

Thank you in advance.

**jscheuer1** · 11-20-2007, 07:51 PM

Unless a user's security is abnormally tight, that only happens locally, as a security measure. As far as IE is concerned, javascript is ActiveX. Click on the bar and click on allow and click on yes. Once your page is live, this will not happen. You can also give your page 'the mark of the web'. That way (in most cases) it will not display the security bar locally either. Put this right after your <html> tag like so:

Code:

<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>

But, navigating away from the page to another local page, or including another local page on it via a frame or an iframe can be problematical if said page does not also have 'the mark of the web' on it.

**treebot** · 11-26-2007, 10:50 PM

Thank you so much for your help!

I was wondering if you'd be able to help me with another issue:

As you know, the script's rev="loadarea::http://URL" allows a viewer to click the enlarged image and open the URL.

Is it possible to have the links open in a new window?

Thanks in advance!

**jscheuer1** · 11-27-2007, 09:15 AM

Yes. You can edit this line in the loadimage:function(linkobj):

Code:

imageHTML='<a href="'+dest+'" target="_blank">'+imageHTML+'</a>'

addition highlighted. Then all of the linked larger images will target a new window.

Or, if you want to be able to choose the target for each link (additions highlighted):

Code:

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 targ=linkobj.getAttribute("rev").split("::")[2] //Get target for enlarged image's link, if any
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+'"'+(targ? ' target="'+targ+'"' : '')+'>'+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()
}
},

Once you've done that, you can use this sort of syntax with the rev attribute:

Code:

rev="loadarea::http://www.google.com/::_blank"

Leaving off the red part will result in a normal link. Also, if you want to, the target can be any valid value for the HTML target attribute (_blank is the one to use for a unique new window, for example, _new is what one would use for a reusable new window). This means you could also target named windows, frames, or iframes.

Thread: Image Thumbnail Viewer II , IE Problem

Thread Tools

Search Thread

Image Thumbnail Viewer II , IE Problem

Different Image Thumbnail Viewer II problem in IE

Bookmarks

Bookmarks

Posting Permissions