Changing Cursor display

[loudon]

Featured Zoomer Script
http://www.dynamicdrive.com/dynamici...uredzoomer.htm

I have managed to get the above script working fine, but have a couple of problems.
1. The cursor displays as a crosshair, but is it possible to get it to display as a small semi-transparent square similar to that in other like scripts?

2. I want to use the script in a page where around 50 products are displayed dynamically. Is there any way the javascript in the header can be made to display dynamically so that the following script is repeated with the '#image1' changing to '#image2', '#image3', etc. and the image name is changed as well?

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

	$('#image1').addimagezoom({
		zoomrange: [5, 5],
		magnifiersize: [530,300],
		magnifierpos: 'right',
		largeimage: 'images/products/large/imagename.jpg' 
   })
})

[jscheuer1]

1. The cursor is set in the featuredimagezoomer.js file:
   
   

   /*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
   */
   
   //Last updated: May 10th, 2010
   
   jQuery.noConflict()
   
   var featuredimagezoomer={
   	loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
   	magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image
   
   	/////NO NEED TO EDIT BEYOND HERE////////////////
   	dsetting: {magnifiers . . .

   Any valid css value for cursor may go there. There is no standard box cursor. In fact, your observation implied by "a small semi-transparent square similar to that in other like scripts" isn't necessarily universal. Some scripts of this type show a magnifying glass. Others may show a box, but without any semi-transparent filler. Others - well it's up to whoever wrote and installed the script.
   
   Only some browsers support the ability to show a non-standard cursor anyway.
   
   To show a box and have that box accurately reflect the area of enlargement would be tricky if the zoom level is variable. It may be hard enough getting the box 'just so' to work properly like that with a single zoom level.
   
   All that said, you can put a custom cursor in there of your own choosing, there are probably at least several around the web you could download (use Google to find them). Or with the proper image editing software (software that can make a valid .cur image), you can make your own. Once you have the custom cursor, the syntax in the script would be (using the highlighted line from above):
   
   

   magnifycursor: 'url(mycursor.cur), crosshair', //Value for CSS's 'cursor' attribute, added to original image

   Be sure to use the fall back (as shown) for browsers that don't support custom cursors.
   
   
2. Doing that won't accomplish anything other than perhaps slow things down a bit. I assume your goal is to initialize each image as soon as it's parsed by the browser, so it doesn't have to wait for the document to be ready, right? You needn't worry though, unless your document is extremely long, as document.ready fires as soon as the text is loaded. It doesn't wait for css, images, Flash, iframes, etc.
   
   But if you feel you need to anyway, you could follow each image tag with:
   
   

   <script type="text/javascript">
   jQuery('#image1').addimagezoom({
   	zoomrange: [5, 5],
   	magnifiersize: [530,300],
   	magnifierpos: 'right',
   	largeimage: 'images/products/large/imagename.jpg' 
   });
   </script>

   But if the image is in a table, that may present problems for some browsers, and will cause an issue for all browsers unless you change (in featuredimagezoomer.js):
   
   

   	init:function($, $img, options){
   		var setting=$.extend({}, this.dsetting, options)
   		var $statusdiv=$('<div style="position:absolute;visibility:hidden;left:0;top:0;z-index:1000" />')
   			.html('<img src="'+this.loadinggif+'" />')
   			.appendTo(document.body) //create DIV to show "loading" gif/ "Current Zoom" info
   		var $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   			.append('<div style="position:relative;left:0;top:0;" />')
   			.appendTo(document.body) //create magnifier container
   
   		function getspecs($maginner, $bigim . . .

   to:
   
   

   	init:function($, $img, options){
   		var setting=$.extend({}, this.dsetting, options)
   		var $statusdiv=$('<div style="position:absolute;visibility:hidden;left:0;top:0;z-index:1000" />')
   			.html('<img src="'+this.loadinggif+'" />')
   			.prependTo(document.body) //create DIV to show "loading" gif/ "Current Zoom" info
   		var $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   			.append('<div style="position:relative;left:0;top:0;" />')
   			.prependTo(document.body) //create magnifier container
   
   		function getspecs($maginner, $bigim . . .

   Even then it might not be enough to avoid parse errors in some browsers, or perhaps even a script error of some type generally.

[loudon]

Hi
Thanks for the reply, and the explanation which was easy to understand.
Both the cursor and the JQuery code are now working a treat.
My main reason for wanting to do this was to make the page more scalable. It is likely that the products will change frequently and will possibly be updated by the client using a cms. Now the image zoom facility updates as well.
Thanks again for your help.

[jscheuer1]

Ah, I see. For #2 then you could use:

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

	$('#image1').addimagezoom({
		zoomrange: [5, 5],
		magnifiersize: [530,300],
		magnifierpos: 'right',
		largeimage: 'images/products/large/imagename.jpg' 
   })
})

Put it either in the head or in the body of the document, and it would be safer cross browser (this includes browsers you perhaps aren't testing in) and does not require the changes to the main script I mentioned, in fact it would be safer to revert those.

For #1, it also occurs to me that many browsers have a 'magnify' cursor, a magnifying glass. So you could throw that into the mix:

magnifycursor: 'url(mycursor.cur), magnify, crosshair', //Value for CSS's 'cursor' attribute, added to original image

In any given browser, all cursors listed will be attempted in the order given, the first supported method will be used, the rest ignored.

[Nile]

@John, I'm pretty sure the OP is looking for something like: http://www.kohls.com/kohlsStore/mens...ight+Jeans.jsp where you see the crosshair, and a box showing what is being zoomed in on.

[jscheuer1]

@John, I'm pretty sure the OP is looking for something like . . .

Now that you mention it, I think so too. Here's a drop in replacement, use in place of featuredimagezoomer.js:

Attachment 3696

You can change the shade color, opacity and border of the moving inset. But, if you do nothing, you will get one like in the page you linked to.

If you want to set those options, for example:

<script type="text/javascript">
jQuery(document).ready(function($){
	$('#image1').addimagezoom({
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshadecolor: 'blue',
		cursorshadeopacity: 0.4,
		cursorshadeborder: '3px dotted darkred',
		largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
	})
</script>

The defaults are:

cursorshadecolor: '#fff', cursorshadeopacity: 0.3, cursorshadeborder: '1px solid black'

Works with fixed or variable zoom. With variable zoom the shaded inset changes size.

One thing that's a little tricky though is that it wraps the image in a division. This will cause problems with some layouts but probably nothing that can't be worked out.