PDA

View Full Version : Can't figure out the problem with Image Zoomer



scubapete
10-11-2012, 12:48 PM
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 (http://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
10-11-2012, 02:07 PM
Link is broken.

scubapete
10-11-2012, 02:47 PM
Sorry about that, try this;

www.explorerdiving.ca/dive-map.html

traq
10-11-2012, 03:37 PM
that works. also, is this the script (http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm) you're referring to?

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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
10-11-2012, 05:40 PM
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
10-11-2012, 06:48 PM
Please use the forum's bbcode tags and indent your code to make it more readable:

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

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

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
10-11-2012, 11:54 PM
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
10-12-2012, 12:55 AM
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
10-12-2012, 01:13 AM
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?



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 (http://www.explorerdiving.ca/dive-map1.html). Is there any reason you need that iframe? It seems things would be working fine, without it.



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



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

(proof):
http://custom-anything.com/sand/dive.png

scubapete
10-12-2012, 01:57 AM
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?

bernie1227
10-12-2012, 02:10 AM
Not working in safari as well, and in opera, you only get the zoomed part when you have your cursor in the middle of the image. However, it appears to be working fine on opera when I'm at the source of the iframe.

jscheuer1
10-12-2012, 02:31 PM
The featured image zoomer script is not being used on that page (index1.html). There are styles for a css image gallery. Something like:

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

These are being used, but they've been modified and/or are not being effective in some browsers.

You need to decide which you're going to use, get rid of the one you're not using, and follow the complete instructions for the one you do want to use.