Pulkit Mittal
Pulkit Mittal

Reputation: 6076

Having troubles with Fancy zoom on IE

I was trying to use the plugin FancyZoom (for showing full images on clicking the thumbnails) from here.

I modified it a little bit to better suit my needs, but somehow it's not working in IE.

The exception it gives on IE is:

SCRIPT5007: Unable to get value of the property 'css': object is null or undefined
jquery.fancyzoom.js, line 91 character 5

For quick reference, the code piece of javascript is:

function closeZoomBox(o){
 var oImgZoomBox = o.oImgZoomBox;
 o.oImgClose.remove();
 $('div',oImgZoomBox).remove();
 var endClose = function(){
   oImgZoomBox.empty().remove();
   o.imgSrc.css('opacity',1); // THROWING ERROR HERE
};
}

I have my site hosted here.

It would be really helpful if you can look into what wrong I am doing. (Or suggest me any other plugin which can suit my needs).

The problem is only with IE9. It works even for IE8, IE7.

I cannot start a bounty until 22 hours, but I promise I will award a bounty of 100 points, if anybody can help me out with it.

Upvotes: 0

Views: 379

Answers (3)

Pulkit Mittal
Pulkit Mittal

Reputation: 6076

So I went through all the Javascript code and figured out the problem, which was in the file-names of the images. I was using "registration pages.png" (with a space) and it was somehow converting this file name to "registration%20pages.png" in the code and comparing it with the original filename. It was a lame error, but I think it was more in the way I was implementing.

Thanks people whoever invested their time.

Upvotes: 0

csha
csha

Reputation: 9564

You can use CSS3's transitions - they are supported by MSIE 10 and much nicer - no need for javascript!

<style>
 img {
  width: 32px;
  height: 32px;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
 }
 img:target {
  width: 64px;
  height: 64px;
 }
</style>
<a href="#img1"><img id="img1" src="./img.png" /></a>
<a href="#img2"><img id="img2" src="./img.png" /></a>

So easy :D

EDIT: Here is a link to jsFiddle.

Upvotes: 1

Henry Boldizsar
Henry Boldizsar

Reputation: 489

It says right on the plugin's homepage, "The shadow plugin works only for non ie browser, add it in the header of your html page and fancy zoom will display a shadow on the zoomed image."

Here's alternatives that work in IE: Shadowbox.js seems to meet your needs and works in "all major browsers" http://www.shadowbox-js.com/. Or, check out lightbox 2 at http://lokeshdhakar.com/projects/lightbox2/ "works on all modern browsers" and "Lightbox2 is open-source."

Upvotes: 3

Related Questions