3

I´ve been trying (and searching) since days, but didn´t got my idea work...

I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.

Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom

The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!

drytooler
  • 31
  • 2

1 Answers1

0

The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.

If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:

left: 0px;
top: 0px;
height: 0px;
width: 0px;

This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.

I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.

The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:

<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url(&quot;images/large/image1.jpg&quot;); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow">&nbsp;</div>

Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.

I hope this helps!

Omar Shehata
  • 1,054
  • 14
  • 18
  • Thank you Omar, this helps a lot! I wrote a fiddle for 2 hours, but I lost it while signing in :-( Now I try to write the code directly into my page. I only use one image and size it with css, so I don´t have to hide a pic, but have to change its dimensions via css. 2nd step is more difficult for me: When I do a mouse hover on the img, it gets larger dimensions and will be *movable* inside its box - but how?? Big content (img) in small box (p) with `overflow:auto` seems to be a solution, but how to get rid off the scrollbars? js? I´m really on fire to figure this out now! :-) – drytooler Aug 15 '16 at 15:59
  • Did you try `overflow:hidden` ? – Omar Shehata Aug 15 '16 at 16:20
  • I still try to get this fiddle run to have an easy test area... but it doesn´t work [link](http://jsfiddle.net/drytooler/j04n674s/) Where to set `overflow:hidden`? If I have box (p) with an image in it I think I need `overflow:auto` to make it scrollable...(?) – drytooler Aug 15 '16 at 17:49
  • fiddle update (https://jsfiddle.net/drytooler/j04n674s/): img-zoom (elevatezoom.js) running, but lightbox (featherlight.js) not there yet. Will be next step.. – drytooler Aug 15 '16 at 20:54