View Full Version : Featured Image Zoomer v2.1: scroll/follow sidebar assigned to zoom/magnifer area?

04-20-2013, 06:05 PM
1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem: Wanting scroll/follow sidebar assigned to zoom/magnifer area. Using Demo 4 and all is working but my images are really tall and I want the zoom/magnifer area to scroll down the page. How could I do that with CSS or Jquery? Not sure how to tweak this code on DD.

Here is my page:http://www.paintedpeace.com/gallery/wall-planks/
If you click on a thumbnail and go to zoom on the bottom of the long piece of art the magnify area stays at top of page and not visible.


04-21-2013, 01:21 PM
you could try


04-21-2013, 05:34 PM
Using a text only editor like NotePad, in the multizoom.css file, near the top, add the highlighted as shown:

.magnifyarea { /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
position: fixed !important;
top: 350px !important;

Requires IE 7 or later, or any other modern browser.

You may or may not want to adjust the top coordinate. Just keep in mind that some user's windows will not be as tall as others, and you don't want the magnify area to be so far down in the window that it cannot be fully seen, or perhaps not even be seen at all.

jQuery could be used to set the top coordinate at half the user's window height minus half the height of the magnify area. It would have to update on window resize as well. If you're interested in that, let me know.

Also keep in mind that if you set variable zoom, or the mouse wheel disabled options, it will be difficult for the user to scroll the page while viewing the magnified image.

04-21-2013, 11:58 PM

Thank that did the trick. I appreciate your post.