Hi, I really like this zoom and would like to use it on my site.

I've created a custom content type with multiple IMCE Image fields. The fields are shown as a thumbnail and when you click on it, the fancyzoom loads the full image. This works just fine, only when the images have different ratios there's a problem.

The second image loads with the width and height of the first image.

This is the code I'm using to display the IMCE Image Fields for Fancyzoom:

		<div class="crop-150x100">
			<a href="<?php print $node->field_image1[0]['imceimage_path'] ?>">
				<img src="<?php print $node->field_image1[0]['imceimage_path'] ?>" />
			</a>
		</div>



		<div class="crop-150x100">
			<a href="<?php print $node->field_image2[0]['imceimage_path'] ?>">
				<img src="<?php print $node->field_image2[0]['imceimage_path'] ?>" />
			</a>
		</div>

The .crop-150x100 class is a quick and dirty way to use the same image as a thumbnail:

.crop-150x100 {
	margin-top: 3px;
	height: 100px;
	width: 150px;
	overflow: hidden;
}

Does anyone have this same problem with fancyzoom? I call my scripts at the end of the page, not in the header.

I hope someone could help me with this one.

Comments

fivehimself’s picture

fivehimself commented

To bad, but skipping this module / plugin due to this problem... If someone has a resolution, I would still be verry happy. Untill that time, I'll be using lighbox.

thinkyhead’s picture

thinkyhead commented
Assigned: Unassigned » thinkyhead

Have to see if this affects multiple images in other scenarios as well. Probably an issue with the FancyZoom javascript doing bad overloading...

thinkyhead’s picture

thinkyhead commented
Status: Active » Postponed (maintainer needs more info)

I'd like to see an example of this so I can see the problem in action.

fivehimself’s picture

fivehimself commented

Sorry for the late reply. Don't have a live install somewhere to show... Needed to speed up my project, so went with a different module.

mikec’s picture

mikec commented
Version: 6.x-1.1 » 6.x-1.4
Status: Postponed (maintainer needs more info) » Active

I'm experiencing this problem at the bottom of this page:

http://labjack.com/support/clouddot/labview

All the thumbnails are the same width (270px), but different heights. If you click on all four thumbnails, they will all become the same width, either 556px or 482px, depending on which one you click on first.

Does this help?

Argus’s picture

Argus commented

Confirming this behaviour when using 'jQuery Minimized' or 'JQuery' script.

But when using 'Standard Minimized' script it seems to work fine.

mikec’s picture

mikec commented

Thanks for the tip, Argus. I switched the link in #5 to use "Standard Minimized", and it does seem to be working fine. I'll switch it back to "jQuery Minimized" by request if it helps in debugging.

adamgerthel’s picture

adamgerthel commented

@ #7 that solved it for me as well. Thanks

michael_lessard_micles.biz’s picture

michael_lessard_micles.biz commented

Hint : this bug occurs in a cached version of the site, not when I am logged.

It therefore seems that Drupal caching confused or bypasses a part of Fancyzoom.

BUT, on the other hand, I confirm that by DE-selecting Use Minimized Javascript, the bug stops. Therefore, it's logically the cache related to minimized javascript that conflicts...

thinkyhead’s picture

thinkyhead commented

That's a good tip, I'll check that out. I need to publish updates to some other modules as well before the year is out.

FancyBox? That one looks pretty nice.

thinkyhead’s picture

thinkyhead commented
Status: Active » Fixed

This is probably better now. Get the latest FancyZoom Javascript tarball from http://www.thinkyhead.com/design/fancyzoom and give it a try. The key was to use .bind("mouseover", ...) instead of .one("mouseover", ...) so that the image pre-loads every time you mouse over an image instead of just the first time.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.