Can't figure out the problem with Image Zoomer

[scubapete]

Hello all,

I am attempting to use the Image Zoomer java script and followed the directions(or am not seeing what I have missed), but as soon as I change it over from the example code to make it my own info, it no longer is working.
I'm sure it is simple, but I have been looking at it for to long and just can't see it.
http://www.explorerdiving.ca/dive-map.html The idea is to be able to hover over the map and zoom in on dive sites on the lake.

Any help would be awesome and greatly appreciated.

[traq]

Link is broken.

[scubapete]

Sorry about that, try this;

www.explorerdiving.ca/dive-map.html

[traq]

that works. also, is this the script you're referring to?

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

this might have something to do with your problem:

Failed to load resource [featuredimagezoomer.js]: the server responded with a status of 404 (Not Found)

[scubapete]

Hi Adrian,

Yes, that would be the script.

Ahh yes, it would help to have that file uploaded. Duh! Plus I did catch one other mistake. Thanks, I guess I just needed to stop looking at it for awhile.

It seems to be working but now I need to adjust the zoom image over to the left. I think this is the correct part of code from the .js file that needs to be tweaked.

init: function($, $img, options){
		var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
		fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
		setting.largeimage = setting.largeimage || $img.get(0).src;
		$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
		//following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:

I tried changing the left:-10000px; but nothing... for some reason I can not wrap my brain around this whole positioning code??

Thanks so much for the help.

[traq]

Please use the forum's bbcode tags and indent your code to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] <!-- markup goes here -->.....[/html]
for js/css/other.......[code] code goes here................[/code]

----------------------------------------

Your large image is also returning a 404.
When I visit the page you linked to, it's still not working at all. Can you show us the updated version?

[bernie1227]

I tried changing the left:-10000px; but nothing... for some reason I can not wrap my brain around this whole positioning code??

Thanks so much for the help.

With positioning, left for example, is the object's distance from the left of the page, so saying -10000px would be of the monitor by 10000px, so the browser just won't do it really, if you want the object 20 px from the edge of the page however, you would say:

left: 20px;

[scubapete]

Sorry about the code and thanks for the bbcode tags. I will be sure to use them next time.

Ok all is up and good in FF and IE the only thing I can't get is to move the magnified image down to the bottom corner of the original image.

I did try to tweak the top:-100000 to top:500; but no change. Is there another place that needs to be change also or instead?

Thanks for any and all help

Bernie, so basically they put something impossible just to hold the spot?

[traq]

so basically they put something impossible just to hold the spot?

actually, the script is (very purposefully) using that -100000px to hide the viewer area when it's not in use. The positioning is then changed dynamically when you mouseover the image.

Unless I'm misunderstanding you, or there's some other problem, then passing the option magnifierpos: 'left' when you call the plugin should be sufficient. Is that not working?

Edit:

doesn't work in FF or chrome, for me. Upon investigation, you're using an iframe to display your map, and the script is working on the page itself. Is there any reason you need that iframe? It seems things would be working fine, without it.

Edit:

or, it was... it's not working, now (your large image gives a 404 error, again).

Edit:

wait... wait...
something odd is going on. sometimes it's loading, sometimes it's not.

(proof):

[scubapete]

I need the iframe in order to have the fixed background image.

I just check the page in IE and FF not problem, but chrome was nothing not even the cross hare or link.

What I am asking for help on (besides getting to work in chrome now too) is when you view it above, the smaller image (the zoom part) is in upper left corner.. I want it down in the lower left corner to appear over top the dragon scroll.

Does that make sense?