MultiZoon fails in IE after being minified

[colnector]

1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edzoomerv2.htm

3) Describe problem: Fatal bug: after the script is minified (either JSMin / Uglify / Closure) even by simply dropping comments and line breaks, it fails on IE without showing an error message. The non-minified version works and as there's no error message I don't know how to attend to this issue.

Another problem there is the call to noConflict() in the beginning on the script that might mess up with other scripts using jQuery's $ - I've simply removed it.

There's another issue about forcing the usage of a script selector rather than allowing to pass objects but that's manageable.
The script is otherwise really cool and a welcomed addition on my website. Thanks

[ajfmrf]

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

[colnector]

The script on my site is compiled with other scripts as well so that might not help you isolate the problem. You could see for example this coin. I did manage to isolate the problem to the minification of the script. When it's not minified (and still combined with all other scripts in one file), it'll work just fine.
The script itself minified is attached here.

[jscheuer1]

Dynamic Drive doesn't warranty its scripts to survive minification.

Most Dynamic Drive scripts are not written with being minified in mind. A few may be, others even though they were not, may still be successfully be minified.

However, most DD scripts do have a credit comment inside the script that most minifiers strip. In almost all cases these credit comments must remain for legal use. You can minify, and/or obfuscate, tweak, change, etc., all you want, but the credit comment must remain.

If you're having trouble minifying any script the solution is the same. Make sure it uses strict conventions as regards line termination. Most DD scripts do not. Also, though I don't think it applies to this script, make sure it's not using any IE proprietary conditional script comments, as these will be stripped along with regular script comments, but are usually required for proper execution of the code. If these IE proprietary conditional script comments are being used, they must be restored somehow after minifying.

The use of jQuery.noConflict() is optional, feel free to remove it or comment it out. When DD first started to use jQuery they used noConflict mode on most of the scripts assuming that other libraries like Prototype or MooTools might be on a given page. More recently this practice/assumption has been dropped.

As for the coding style visa vis:

forcing the usage of a script selector rather than allowing to pass objects

I believe that practice is also being dropped for newer DD scripts using jQuery. It's a six of one, half a dozen of the other sort of thing though. By having a script selector things are a little easier to follow for folks unfamiliar with jQuery syntax. But, as you point out, it does make it a little harder for a more experienced coder to get the usual jQuery flexibility out of the code.

[colnector]

Thank you for your reply. Could you please elaborate on "Make sure it uses strict conventions as regards line termination"? No errors are shown on IE dev tools and I've ended semicolons everywhere NetBeans indicated it should be added. The minified version works well on Chrome/FireFox/Opera. Do you know what specifically can upset IE? Thanks

[jscheuer1]

Ah, I was confused over which script you were talking about. This one does include an IE proprietary script comment here:

isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(),

In order for it to work in IE, it must be restored, and in order to be legal, the credit comments:

// Multi-Zoom Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// requires: a modified version of Dynamic Drive's Featured Image Zoomer (w/ adjustable power) (included)

/*Featured Image Zoomer (May 8th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

must be restored as well. Here's your code with all of that taken care of (right click and 'Save As'):

multizoom.min.js

The browser cache may need to be cleared and/or the page refreshed to see changes.

[colnector]

Thank you very much for your reply. Guess I've missed the obvious. As I automatically minify my scripts and seems all popular minification programs will strip that comment, I've reverted to jQuery.browser.msie which has been removed as of jQuery1.9 but can be restored http://stackoverflow.com/questions/1...oved-in-jquery
I've also added the copyrights note as a part of the code to prevent it from being stripped.
Thanks

[jscheuer1]

I actually have an update (2.2) to the script which allows for a few more features (from its release notes):

	// first thumb (.firstthumb class) - that class added to a thumbnail link will make it the the first image in a multi-zoom group
	// highlighting of active and/or hover states (.activethumb class) added automatically to current thumbnail link, style it via CSS if desired
	// persistence of multi-zoom thumbnails (persist: true) - cookie will remember last active thumbnail in a multizoom group
		// use (days: 10) to set persist days, defaults to session only

I haven't been able to get DD to pick it up yet. I also noticed looking at it again just now that I've changed the IE detection to:

isie: (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent))? ie[1] : false;})(), //is this IE, if so, which version?

which no longer relies upon IE proprietary conditional script comments and also returns the IE version number. I'm not making use of it yet (the version number) in this script, but it might come in handy at some point. The only reason to detect IE for this script at all is that unlike all other browsers, an empty div (used to register movement over the zoomable image) with no background doesn't register mouseover/out events. So for IE only I give it a non-existent background image, which other browsers don't need and some would record as a failed GET in their developer consoles.

[colnector]

Thanks for the update. If you're up for requests then these are two things which could make the script more helpful:
1/ Clicking the image would open it in full (upto given limits or its own size) as sometimes users would simply like to see the whole thing. Something like on http://gettopup.com/ or http://lokeshdhakar.com/projects/lightbox2/
The reason I don't want LightBox alone is that MultiZoom doesn't require the user to click and doesn't take the whole screen. But when a click is done, why not give the user the whole picture?
2/ Ability to delete the additions by addimagezoom() in case I wish to disable the option or simply replace the image on the page.

Let me know if these requests make sense. Thanks

[colnector]

While the script works in IE, the following line creates unneeded requests to my server:

				.css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})

I guess we can call this a bug.