Javascript image viewer not working in internet explorer

Question

I have made a similar kind of image viewer mentioned in below site for my website. http://www.javascriptkit.com/script/script2/backbox/ The image viewer is working fine in Chrome but not working in Internet Exlporer; I have not given my website details for security reasons but you view the issue by copy pasting below link in Chrome and Internet Explorer. http://www.javascriptkit.com/script/script2/backbox/

Click the Image in above link and see the error in internet explorer & see the same in other browser to see its working condition... PFB snap shot

Could any one of you tell why is not working in internet explorer ?

Error Msg from IE F12 devolper tools console area is :

SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined effects.js, line 1 character 1747

effects.js = http://www.javascriptkit.com/script/script2/backbox/js/effects.js

If you need sample js files, please get that from http://www.javascriptkit.com/script/script2/backbox/backboxfiles.zip

HTML used is;

<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>

<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>

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

Answer 1

regarding about your concern why this occurs in IE and not in chrome, that's because of this condition if(/MSIE/.test(navigator.userAgent) which is true when your browser is IE

for correcting the issue, as you said in a comment you can add a 'undefined' condition.
just replace this line:

if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}  

with:

if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")+"alpha(opacity="+_11*100+")"});}}

and this line:

if(/MSIE/.test(navigator.userAgent)){Element.setStyle(_10,{filter:Element.getStyle(_10,"filter").replace(/alpha\([^\)]*\)/gi,"")});}

with:

if(/MSIE/.test(navigator.userAgent)){var filterStyle=Element.getStyle(_10,"filter");if(typeof(filterStyle)!="undefined"){Element.setStyle(_10,{filter:filterStyle.replace(/alpha\([^\)]*\)/gi,"")});}}

in the effects.js file