PDA

View Full Version : MultiZoon fails in IE after being minified



colnector
06-18-2013, 11:41 PM
1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomerv2.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
06-19-2013, 12:43 AM
Please post a link to the page on your site that contains the problematic script so we can check it out.

colnector
06-19-2013, 02:12 AM
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 (http://colnect.com/en/coins/coin/38844-25_Dollars_Anniversary_of_the_Investure_of_Prince_Charles-Numismatic_Product-Jamaica). 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
06-19-2013, 02:16 AM
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
06-19-2013, 02:32 AM
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
06-19-2013, 03:25 AM
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'):

5097

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

colnector
06-19-2013, 08:57 AM
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/14379539/whats-a-quick-pure-javascript-replacement-for-jquery-browser-removed-in-jquery
I've also added the copyrights note as a part of the code to prevent it from being stripped.
Thanks

jscheuer1
06-19-2013, 09:45 AM
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
06-19-2013, 10:30 AM
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
06-20-2013, 04:37 PM
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.

jscheuer1
06-21-2013, 03:48 AM
Not a bug, well perhaps one in the IE browsers for not recognizing mouse activity over an empty div element unless it has background. It doesn't break the script or the page. So is not a bug in the script. If it bothers you that much, you can try something I had at one time considered as an alternative:


.css({backgroundColor: (this.isie? 'black' : 'transparent'), opacity: (this.isie? 0.001 : 1)})

But I rejected that because I thought it was messier, potentially more prone to complications in earlier IE (8 and less) which would need to use a filter to do that.

You could also change it to:


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

and host a small 1px by 1px transparent .gif for it. That would still generate a request though presumably would be cached, so as to only require one request. But I rejected that idea because IE has issues with background images anyway, such that this approach might not be much better, might even be worse in some versions, and because it would require one to host the image.

All in all I think I took the simplest approach. But there might be another I'm not aware of.

As for your other two requests, You can get rid of everything added by the script by doing:


jQuery('.magnifyarea, .cursorshade, .zoomstatus, .zoomtracker').remove();

And about having a larger image available onclick, that can be worked out. I looked at that topup script and although it has a very nice look and feel and feature set, its not current with jQuery and breaks if it's on a page with another version of jQuery on the page. Even if noConflict mode is used and the version of jQuery it uses (1.4 something) is not sufficient to run the multizoom script. I have a great respect for Lokesh's work with Lightbox, and beleive his was the original. But it still doesn't do resizing, so I would go with FancyBox on that. Integrating it is a little complicated, but not too hard and requires no modification to the script.

Here's a demo:

http://home.comcast.net/~jscheuer1/side/demos/multizoom/index-fancybox.htm

colnector
06-21-2013, 06:54 AM
Thank you very much for the explanation and the really nice integration with FancyBox. I believe it'll be a very nice addition in the plugin as it then gives a more comprehensive solution but I'd be happy using it either way.

Interesting to note about the IE generated request doesn't happen on most pages of my website and I haven't figured out the difference between a page such as a banknote page (http://colnect.com/en/banknotes/banknote/45239-50_Dinars-2013_ND_Issue-Libya) and the main screen (shown to logged in members) that does generate the request. I'll play with it a bit.

I had another idea of providing an option to position the zoomed image div elsewhere than just a "left" and "right". In my example, I'd prefer the zoom window to be bigger and open up at the same location for both banknote pictures.

Hope all my ideas are helpful rather than a burden. I thank you very much for your time and patience :)

jscheuer1
06-24-2013, 10:01 PM
.
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), 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.

That said, you can control the size of the magnifyarea in the init:


$('#image1').addimagezoom({ // single image zoom
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'hayden.jpg' //<-- No comma after last option!
})


And you can force it to be in a certain spot on the page by setting it's left and top coords in css:


.magnifyarea {
top: 100px !important;
left: 500px !important;
}


But that might not work out too well with your layout because it's centered, which means that you would want the magnifyarea to move around at least left to right to be in a position relative to the notes. So you could still let the script handle that part, just set the top coord:


.magnifyarea {
top: 100px !important;
}


Adjust the 100px part to suit. Just make sure to use the !important keyword as shown to override what the script will do.

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

If you want more control over it's position, you can set both top and left coords to 0 (again with the !important keyword for both), then it can be appended to a position relative div after both inits. That position relative div can be placed wherever you like on the page.

If you want more info on that technique, let me know. It has already been done in these forums to place the larger image in a fixed location in the layout and works quite well for that.

colnector
06-25-2013, 02:56 AM
Thank you for your copyrights notice alert. As you've previously requested, the copyrights notice is included in the script itself. Now I find out for the first time you'd like a notice to be included in each and every HTML produced but this doesn't make sense to me and I haven't seen such demand before. Which leaves me with the following options:
1/ Can I buy a license that won't require any copyrights notice?
2/ Get another script with either standard BSD license such as http://www.mind-projects.it/projects/jqzoom/demos.php#demo1 or paid license, such as $7 for http://codecanyon.net/item/etalage/180719
3/ Write a script from scratch.

As I've already integrated your script, I'd prefer option 1 if the price is reasonable. Mind it's used in a part of Colnect that's completely free to use for any person without the need to register the website. Please let me know.

jscheuer1
06-25-2013, 03:12 AM
If it were my script I could license it to you. However, although I've written the updates, it's a Dynamic Drive script. I don't have the rights to it to license it to anyone.

I'm sorry this is the first you've become aware of the usage terms:

http://www.dynamicdrive.com/notice.htm

They are linked to from virtually every page of the forum and the main site though, and clearly stated in the credits themselves. It's hard for me to imagine that you missed them unless you weren't interested in knowing the terms and therefore weren't looking for them.

You can contact ddadmin, who runs the forum and main site, to ask him about licensing terms.

Please allow a few weeks, in case he's busier than usual -

Via Email:

ddrivehelp@gmail.com

or via forum PM:

http://www.dynamicdrive.com/forums/private.php?do=newpm&u=1

colnector
06-25-2013, 06:28 AM
I've sent the PM and Email..
Guess I breezed through the terms, sufficing with "Users may use any DHTML scripts offered for download on Dynamic Drive, free of charge, on both personal and commercial web site". Perhaps some people do actually read the entire terms of use of each and every website and/or service they use.
Thank you for your time and efforts here.