Magnifier doesn't line up with mouse, and often fails on initial page load
schildi - February 10, 2008 - 01:09
| Project: | Magnifier |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | reviewed & tested by the community |
Description
After installing the module the theme for images was set up to use the new functionality:
<?php
$args = array(
'magnify' => 4,
'glass_size' => 160,
'imagecache' => '',
'image' => '/' . $node->images['_original'],
'title' => $node->title,
'alt' => $node->title
);
print theme('magnifier', $node->images['preview'], $args);
?>This yields to HTML tags as follows:
<script type="text/javascript">
$(document).ready(function() {
$("img#magnifier-0").magnify({ scale:4, glassSize:160, image:"files/images/<filename>.jpg" });
});
</script>
...
...
<div class="content">
<img src="<path to image>" id="magnifier-0" class=" magnifier" title="some title" alt="some text" />No magnifying glass is provided.
When checking the demonstration page "http://erikgecas.com/node/14" there also seems to be no effect.
There is also really a need to provide some kind of documentation including examples.
Regards
Schildi
#1
what os/browser are you using? the demo link works fine for me, and your code looks good.
#2
Currently I am using Linux Suse-10.2 (Intel) and Firefox 2.0.
I like to add that your page at "http://erikgecas.com/" works for me. That means when positioning the mouse on "ERIK GECAS" a new graphic rises. And I can also follow the link to http://erikgecas.com/home and see the effects when positioning in the circles.
Looks nice!. But how to achieve this? Please also show how this can be done.
Regards
Schildi
#3
I'm seeing the same problem intermittently on linux now. seems fine on windows. to confirm, try a) accessing on windoze and see if it works there, and b) refresh the page on linux and see if that makes it work.
thanks,
aaron
#4
OK, I checked the behavior using Linux/Firefox Linux/Konqueror Windows-XP/Firefox Windows-XP/Internet-Explorer:
No magnifying glass
And I did some additional tests:
Using module contemplates (content templates) a template was set up for type story (body only):
<?php print $node->content['body']['#value'] ?><div class="field field-type-image field-field-attach-image">
<div class="field-items">
<?php foreach ((array)$node->field_attach_image as $item) { ?>
<?php
$args = array(
'magnify' => 4,
'glass_size' => 160,
'imagecache' => 'scale_medium',
'image' => '/' . $item['filepath'],
'title' => $item['title'],
'alt' => $item['alt']
);
?>
<div class="field-item"><a href=/<?php $item['filepath'] ?> ><?php print theme('magnifier', $item['filepath'], $args); ?></a></div>
<?php } ?>
</div>
</div>
For a specific story containing two images (CCK) the following code is generated:
<script type="text/javascript">
$(document).ready(function() {
$("img#magnifier-0").magnify({ scale:4, glassSize:160, image:"/files/KStA-19610914-A.jpg" });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("img#magnifier-1").magnify({ scale:4, glassSize:160, image:"/files/KStA-19610914-B.jpg" });
});
</script>
...
...
<div class="field field-type-image field-field-attach-image">
<div class="field-items">
<div class="field-item"><a href=/ ><img src="http://archiv.bgv-rhein-berg.de/system/files/imagecache/scale_medium/KStA-19610914-A.jpg" alt="" title="" id="magnifier-0" class=" magnifier" /></a></div>
<div class="field-item"><a href=/ ><img src="http://archiv.bgv-rhein-berg.de/system/files/imagecache/scale_medium/KStA-19610914-B.jpg" alt="" title="" id="magnifier-1" class=" magnifier" /></a></div>
</div>
</div>
By the way. Why are the title and alt fields empty? They have real values in the example.
And, SORRY
accidentally I can see that there IS some kind of a magnifying glass!
But it is positioned at a place I did not expect. And the small area it shows pops up outside the image. And it only pops up when the mouse crosses the image border.
See screen shot!
The mouse was positioned at text "Maschinen" (left border of image).
The text partialy shown in the magnifier is the start of "versonnen" about 10 lines above "Maschinen".
The magnifier does not change content when moving the mouse through the image.
#5
I'm having similar problems here. it seems to work only when the 'glass_size' is large enough:
it works nicely on http://dev.ecoanarchist.org/?q=magnifier-test-page , although the mouse is not centred on the magnifier,
but it does not work on http://dev.ecoanarchist.org/?q=magnifier-test-page2 - the magnifier only moves while the mouse is ON the magnifier, however, the mouse is off to the right of the magnifier. This means it's only possible to move the magnifier left, or down-left or up-left. shouldn't the magnifier move when ever the mouse is on the image as well?
the difference is glass_size is set to 400 on the first, 300 on the second.
The code for the second is:
<?php$args = array(
'magnify' => 4,
'glass_size' => 300,
'image' => 'http://dev.ecoanarchist.org/files/images/00-machines-of-war-castle-glossary-1767x933.preview.jpg',
'title' => $node->title,
'alt' => $node->title
);
print theme('magnifier', 'http://dev.ecoanarchist.org/files/images/00-machines-of-war-castle-glossary-1767x933.96x96.jpg', $args );
?> <br /><br /> Test page</p>
#6
I just checked bothe your test pages using firefox 2.0.0.12 / Linux Suse 10.2 :
* magnifier-test-page:
All I can see is that scroll bars are appearing when the mouse touches the image border
* magnifier-test-page2
same effect as described in #4
#7
I don't think this is linux related: I've tried the above pages on Firefox3, konqueror, and ie6 on linux, and firefox on Windows XP. All the same.
When I try with 160px glass size, I get what looks the same as Schildi: http://dev.ecoanarchist.org/?q=magnifier-test-page3
Something in the mouse positioning ain't working. Which is strange, because the example (http://erikgecas.com/node/14) works fine, mouse exactly in the centre.
What is the code in that example, please Aaron? And could you try cloning that Delilah page with a different glass_size?
#8
--- ./js/magnifier.js 2008-01-23 11:54:45.000000000 -0500
+++ magnifier.js 2008-03-11 20:21:09.000000000 -0400
@@ -146,8 +146,8 @@
_position:function(e){
// position the overlay under the mouse
- var l = Math.floor(e.pageX - (w/2));
- var t = Math.floor(e.pageY - (h/2));
+ var l = Math.floor(e.pageX - (args.glassSize / 2));
+ var t = Math.floor(e.pageY - (args.glassSize / 2));
$(m.overlay).css({
top: t+"px",
this works for me.
#9
The patch fixes the position of the overlay, but not the position of the image in the overlay.
The position of the image in the overlay appears to be too high at the top, too low at the bottom, and too far left at the left, and too far right at the right. The meeting point is the half the width of the glass from the top and the left.
I'm guessing glass_size should be added in somewhere after line 157, but I'm not sure where
#10
new patch (ignore the old one):
--- /home/data/magnifier/js/magnifier.js 2008-01-23 11:54:45.000000000 -0500
+++ magnifier.js 2008-03-11 23:00:09.000000000 -0400
@@ -146,8 +146,8 @@
_position:function(e){
// position the overlay under the mouse
- var l = Math.floor(e.pageX - (w/2));
- var t = Math.floor(e.pageY - (h/2));
+ var l = Math.floor(e.pageX - (args.glassSize / 2));
+ var t = Math.floor(e.pageY - (args.glassSize / 2));
$(m.overlay).css({
top: t+"px",
@@ -158,8 +158,8 @@
var _off = $(m.srcNode).offset({ scroll:true });
var xOff = (e.pageX - _off.left) / w;
var yOff = (e.pageY - _off.top) / h;
- var x = (m.size.w * xOff * -1)+(w * xOff);
- var y = (m.size.h * yOff * -1)+(h * yOff);
+ var x = (m.size.w * xOff * -1) + (args.glassSize / 2);
+ var y = (m.size.h * yOff * -1) + (args.glassSize / 2);
$(m.img).css({
top: y+"px",
left: x+"px"
Note that http://erikgecas.com/node/14 doesn't actually work correctly - it's slightly off the mark. it's close, but only because there image size is close to the glass_size. other sized images don't work as well: try putting you finger on the baby's nostril in http://erikgecas.com/node/19 then magnify that spot. you'll see that it's ~40px off in the magnified version. Try similar with http://dev.ecoanarchist.org/?q=magnifier-test-page - everything is exact.
#11
Nice to hear that you could do some bug fixing. But for sure there are other effects remaining.
Checking your http://dev.ecoanarchist.org/?q=magnifier-test-page I got the following:
* positioning the mouse in the image --> no effect
* positioning the mouse outside the image e.g. to the right of the image --> scroll bar appearing (see attachment)
#12
yeah, sometimes it doesn't load properly... I have no idea what or why, but if you reload the page, it works.
#13
it appears that this isn't working correctly on first load:
// get our size120 var w = $(this).width();
121 var h = $(this).height();
Width is being set to 0, height to 16, even though the image is 2560 * 1352
#14
yes, you are right. After reloading the page I got the magnifier.
You are close to get it running!
But it looks that the source image for the magnifier is not the underlying large image but the screen content, isn't it?
Otherwise the quality should be better.
Is it possible that width/hight (which are taken from the large image used as base for the magnifier) are assigned before the large image is completely loaded?
Regards
Reiner
#15
Here is an updated patch that also attempts to fix the problem (with initial load, when the image isn't cached already) identified in #14 by wrapping the .magnify jquery code in an image .load (pointed at the small image), which causes it to delay adding the behaviors until the image is fully loaded, and hence the dimensions can be correctly determined. The idea is similar to the one used for "image loading" animations (e.g. http://jqueryfordesigners.com/image-loading/).
If someone could review this and check that this is working for other people also that would be great.
#16
Aaron, any chance of getting these patches applied?
#17
by the way, the images on the demo site (ie. http://erikgecas.com/node/91) are screwed in firefox 3 on linux... the magnifier is about 1.2xwidth, and about 0.3x height, and it only works in the top-left corner...
#18
@naught101 - if you have tested the patch in #15 please set this issue status to RTBC.
#19
Looks good, Grugnog. Tested on FF3 on Kubuntu on two computers. Since that's where the initial "fails to load" bug appeared (albeit ff2), I think this is fixed.
Currently running at http://d514.ecoanarchist.org/?q=magnifier-test if anyone else wants to test
Still a bit jumpy, and sometime after mouseoff, then mouseover again, it doesn't appear at all, however I think these problems are probably other, more minor bugs, and not related to the report.
#20
when following the link you offered:
Fatal error: Call to undefined function drupal_get_path_alias() in /usr/share/drupal5x/sites/all/modules/trace/trace.module on line 153
Regards