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:
Code:
highestzindex: function($, $img){
var z = 0, $els = $img.parents().add($img), elz;
$els.each(function(){
elz = $(this).css('zIndex');
elz = isNaN(elz)? 0 : +elz;
z = Math.max(z, elz);
});
return z;
},
init: function($, $img, options){
var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0},
basezindex = setting.zIndex || this.highestzindex($, $img);
setting.largeim . . .
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.
So you could do like (old syntax for a single feature):
Code:
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
zIndex: 4,
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})
or (new multi-zoom syntax):
Code:
$('.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.
*The current development version has this added as well, same link:
http://home.comcast.net/~jscheuer1/s...izoom/demo.htm
Featured Image Zoomer
Reply With Quote
Originally Posted by jscheuer1
Bookmarks