Featured Image Zoom documentation

[greggT]

1) Script Title: Featured Image Zoomer

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

3) Describe problem: i love FIZ but need to change the script to display the left half of an image in one magnifier and the right half in a second magnifier so that the user can visually compare them. The issue is that I need to understand the conventions and structure of the plugin better.

a) is there some documentation that goes along with this plugin?

b) If not, can anyone tell me why the author chose to prefix some variable names with $, eg, $tracker, $magnifier, etc. Does this imply that the var is private, or a jQuery object, or a HTML snippet, or, perhaps, it means nothing at all? None of these uses are inconsistent across the plugin, so I was thinking that maybe I missed something.

Note that normal variable names may start with dollar or underscore, so $tracker is just another var in javascript (unlike some other languages where the $ means "take value of"). But the ECMAScript spec says "The dollar sign is intended for use only in mechanically generated code"... so I am confused.

c) some lines end in semicolon, some don't. is there some advantage to leaving semi's off lines, besides confusing the gentle reader? semi's appear to be required, according to the MDN guide -- yet this code appears to work just fine.

[jscheuer1]

If I understand your main question, perhaps you could split your image in two and have two FIZ's, one for each half.

On to your other questions. Other than the demo page and comments in the script, there is no documentation. You can use:

http://api.jquery.com/

for documentation on jQuery methods.

The script is a collaboration between Dynamic Drive (presumably ddadmin, but I'm beginning to think he has a team because of how many scripts Dynamic Drive churns out) and myself - not a member of Dynamic Drive, just a very active member of its forum. I added the optional 'lens' effect and worked out one or more efficiencies for the existing code.

As such, there's a bit of a combination of coding styles. Dynamic Drive scripts routinely omit all unnecessary (ones that won't break the script as long as the existing line breaks in the script are maintained) semicolon terminators. I generally do not, but when adding to a Dynamic Drive script I do not always add all of the 'missing' semicolons.

To further answer your question on this issue, as long as there's a line break, many semicolons can be omitted. Browsers add them when parsing. I don't know the reason Dynamic Drive omits virtually every one of these that it can. My best guess is it's a holdover from an earlier time when it wasn't understood how important these can be - say if the code gets minified or compressed. Perhaps it's protection against minification and packing which routinely strip out credits. Minified and packed DD scripts won't run.

Dynamic Drive makes a habit, as do some other jQuery authors of using the $ as the first character for a variable name if it represents a jQuery object. So it was one of your guesses. I attempted to follow this strategy in my modifications. Since then I'm adopting it. I know (as you've noted) that it goes against the ECMAScript spec, but it's so useful in keeping straight what a variable is, that it's something I'm now willing to do. Virtually all script libraries, jQuery included, ignore this particular spec anyway (by using the $ itself and/or $$, $P, etc. as variable(s)). Browsers have never and are likely never to enforce this spec.

If you have a more specific question, let me know.

[greggT]

Thanks! That's VERY helpful.

I sent you a link to my sync-scroll solution.

BTW, I've played with 4 plugins so far, and I like your lens the best b/c it is simple and not too overwhelming, and gives mouse wheel instructions in convenient place that's highly usable. Plus, and this is more a comment for ddadmin, I could not get my "sync scroll" display working on the other plugins -- they were just too complex -- and so the simplicity of fiz helped. It took me only 2 days to modify it, 90% of which was figuring out $ in var name and documenting how fiz, spec and settings differ.

Instead of prefixing jQuery object names with $, I simply suffix Obj to the var name. It's obvious even to the most casual observer... I don't mind the $ convention because it reminds one that a $tracker is a $jQuery obj (or rather, an obj in the $ namespace). But i would have saved a few hours if there was a place to look it up.

As for the missing semi terminators, I CAN imagine that browsers will enforce that someday, and it's hard to read because I don't know if a line continues onto the next line. I am not sure if it's potentially ambiguous, though, that is, if 2 lines run differently based on whether the semi is missing or not... All auto-indenting IDEs would fail for the same reason, and that's enough of a reason right there for me.

[jscheuer1]

When I have more time I'll look over your solution. Right now more on those ; terminators. There of course are places where they shouldn't be. An experienced coder can tell. But you have to go line by line if you want to fill them all in.

And, if browsers do one day enforce them, code all over thew web will break, not just DD scripts. So, although possible, it's unlikely.

On code I write from scratch though, I'm in your camp. I put them all in.

Recently Apple has made a bold move that in part (at least on their newer devices) breaks all sites that rely upon Flash. However, that's motivated mostly by economics. There are some technical justifications, but they're just that, justifications. I doubt such a motive could play into the semicolon terminator issue. But it could.

[urbini]

Hi. Just about the $ sign: I'm trying to use this script in a website where I use $ instead of jQuery because currently it's the only javascript library installed. So in my scripts I write $(document).ready(function() ...
Commenting the initial row jQuery.noConflict() in Featured Image Zoom script seems to make it work, is this correct or have I to do something else?
Thanks a lot

[jscheuer1]

Hi. Just about the $ sign: I'm trying to use this script in a website where I use $ instead of jQuery because currently it's the only javascript library installed. So in my scripts I write $(document).ready(function() ...
Commenting the initial row jQuery.noConflict() in Featured Image Zoom script seems to make it work, is this correct or have I to do something else?
Thanks a lot

No, that's exactly what to do as long as jQuery is the only $ script library you're using. You do have two options though. That's one. The other is to make your other code noConflict compliant. Often all that's required for that is to change:

$(document).ready(function() ...

to:

jQuery(document).ready(function($) ...

But sometimes more is required.

And, as I say, what you've done is fine as long as jQuery is the only $ script library you're using, which I think is a good idea, but isn't always possible.