Use this area to submit an original
DHTML or CSS code for other visitors of DD to utilize or critique. Furthermore,
through this method of submission, your code may be added to DD's
DHTML or
CSS Library section if deemed
useful by the admin of DD. Guidelines for using this forum:

This forum should only be used to post an
original, fully functional and "practical" script. It is not for
putting up experimental or the rudimentary "my first script."

To submit a code, fill out the information
on your code as outlined in the instructions. For the actual code, ideally
you should just enter a URL to the full working demo, to make it easy for
others to check it out. However, if this isn't possible for you, you can
also submit your code inline on the forums, by attaching it.

If you're attaching the full code inline in
your post, please following the following conventions whenever possible:

For straightforward code, just attach it as a single .txt file

For code that consist of both code and images/other media, zip up
all the files and attach it as a .zip file

Should you need it, this forum supports file attachments of the
following type: .txt, .zip, .js, and images (.gif, .jpg, .png etc).

Again, if possible at all, it's best just to submit the URL to the
script instead, for ease of review/ critique by others.

By submitting a code, you declare that
you're the original author of the code, and grant Dynamic Drive to right
to include and modify the code for possible inclusion in our code library.

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

the other this that concerns me is that if the z-Index of the image is >0 the pan window is hidden behind the image
I tried changing the z-Index of the cursorshadow but it had an adverse effect(the cursorshadow flickers)

I'm not 100% sure I understand what you're saying about the z-index. The way the script is setup is that no z-indexes are used. It relies upon the fact that a positioned element will cover another positioned element if it comes later in the DOM. If you add z-index to one, you must add the same z-index to them all. Otherwise, the ones earlier in the DOM with a z-index over 1 will cover those later in the DOM that are using no z-index (z-index defaults to 1 for positioned elements). There are many elements involved though, not just the shade and the image itself. Perhaps that's why you had problems when applying z-index to just the image and the shade. You can use a DOM inspector to see all of the elements involved.

I got that much. I wasn't sure that I 100% understood what you were trying to do with it or what you were trying to do to fix it.

Why would it need a z-index 0f 2?

Anyways, I was just thinking about it in an abstract way, just before I logged on just now. jQuery can easily get the z-index of the image (regardless of whether if it's set inline or in the stylesheet) and use it for all of the other elements the script creates. That should fix it, and in fact (in a quick trial) does. Use this updated version of the script:

I have an announcement to make. It looks fairly certain that this multi zoom script will soon either replace the current Featured Image Zoomer or be offered as a script in its own right here on Dynamic Drive.

Vic, I questioned it initially whether the script should compensate for the designer who uses it using a z-index value on the image. But I figured, "Hey they might do that." And I could see how that might mess things up. However, using a lot of nested positioned elements, though required for a script of this type, is poor design for page layout in general. I think we can leave that vulnerability in there. The designer using this script with that sort of layout will either have to figure it out or seek help here.

However, the script can compensate for what I would at this point call user stupidity. To do so, add the highlighted function and make the highlighted change to the already updated init function:

BTW, the script originally assigned a high z-index, like 1000 to all of these elements. But the major problem in my mind with that is of a drop down menu disappearing behind it. So at that point I opted for no z-index.

A more real issue with the multi zoom script is that, unlike the single image one, since the original or zoomable image changes, if there are varying sizes for these images, the page layout will get jumpy whenever one is changing from one original image to another of a different size. In my demo I solve that problem easily by using a container element of a fixed width and height for the original image. The width is as wide or wider than the widest original image and as tall or taller than the tallest original image. The script can optionally detect these dimensions and center the image in this container, or the image can be allowed to find its own place in this container, or be styled as to where it will go, at least preventing the rest of the page from jumping around.

I could have the script make this container if it's missing. But that would require loading all of the original images and measuring them, or require that the designer using the script supply these dimensions (the latter is done in the case of many slideshow scripts). The former could unnecessarily delay the initialization (lots of large original images) of the script and/or mess with the layout of the page and is complex to do. The latter adds another layer of complexity in explaining the script.

Then there's the fact that a container would natively be display block, while an image is display inline. Floats or tables can be used to make up for that where needed/desired. I'm just trying to figure out the best way to deal with and explain all that to users of the script.

... I'm just trying to figure out the best way to deal with and explain all that to users of the script.

I really have to applaud ddadmin and all of you involved on keeping the site ship-shape.

Its often an overlooked practice, but the daily (and highly successful, I might add) administration here is top rate. Not only do we get a shed load of amazing scripts, we also get excellently logical and well explained documentation to go with it.

I've decided to go with the highestzindex() function as described in my last post with an option to set it. So you can set it, if you do not, it will default to the highest parent element's z-index. Adding to the code from my last post, that would be:

As the release of the updated version including multi-zoom is immanent, you can just wait until that comes out and use it*. It can be used to make a single zommable using the old syntax, as well as to make multi-zoom features using the new.

$('.triggers a').addmultizoom({ // options same as for regular Featured Image Zoomer's addimagezoom unless noted as '- new'
imgObj: '#image1', // image selector for zoomable image (required) - new
descArea: '#description', // description selector (optional - but required if descriptions are used) - new
speed: 1500, // duration of fade in for new zoomable image (in milliseconds, optional) - new
descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
imagevertcenter: true, // zoomable image centers vertically in its container (optional) - new
magvertcenter: true, // magnified area centers vertically in relation to the zoomable image (optional) - new
zoomrange: [3, 10],
magnifiersize: [300,300],
zIndex: 4, // set z-index for created elements, should be as high or higher than the cumlative z-index of the zoomable image - new
magnifierpos: 'right',
cursorshade: true,
largeimage: 'milla.jpg' //<-- No comma after last option!
});

I've made it like this because there really are a lot of layouts out there that use a lot of positioning and z-index. In the long run this (defaulting to highest parent z-index) will save a lot of headaches, and if it causes any problems those can be resolved using the manual setting. At the same time, in what I consider a normal well thought out layout, the new default (which will effectively be 0 in such layouts, so will be the old default for those) will preserve in the original intent of not interfering with drop down menus and other features that must stack higher than static content.