доработка zoomi.js

[choppylion]

Всем привет. Есть данный скрипт, увеличивающий изображение по наводке, но все изображения у меня хранятся в выпадающих пунктах меню, задающиеся так:

<option value="2132" data-icon="img/products/1056.png" data-html-text="BSD WZA<i>2132 gr</i>">BSD WZA</option>

Как можно доработать сам скрипт, чтобы он работал в меню?

[JS](function($){

$.fn.zoomi = function() {

$(this).filter("img").each(function(){

if(!this.z) {

$(this).zoom1().mouseover(function(){$(this).zoom2().show();});

$(this.z).mouseout(function(){$(this).hide();}); }

});

return this;

}

$.fn.zoom1 = function() {

$(this).each(function(){

var e = this;

$(e).css({'position':'relative','z-index':'8'}).after('<img class="'+e.className+'">');

e.z = e.nextSibling;

$(e.z).removeClass("zoomi").addClass("zoom2").attr("src",e.alt || e.src)

.css({'position':'absolute','z-index':'10'});

$(e.z).hide();

});

return this;

}

$.fn.zoom2 = function() {

var s = [];

this.each(function(){

var e = this;

if(!e.z) e = $(e).zoom1()[0]; s.push(e.z);

if(!e.z.complete) return;

if(!e.z.width) { $(e.z).show(); e.z.width=e.z.width; $(e.z).hide(); }

$(e.z).css({left:$(e).offsetLeft()-(e.z.width-e.scrollWidth)/2+'px',

top:$(e).offsetTop()-(e.z.height-e.scrollHeight)/2+'px'});

});

return this.pushStack(s);

}

$.fn.offsetLeft = function() {

var e = this[0];

if(!e.offsetParent) return e.offsetLeft;

return e.offsetLeft + $(e.offsetParent).offsetLeft(); }

$.fn.offsetTop = function() {

var e = this[0];

if(!e.offsetParent) return e.offsetTop;

return e.offsetTop + $(e.offsetParent).offsetTop(); }

$(function(){ $('img.zoomi').zoomi(); });

})(jQuery);

[/JS]

Вот мои наработки:

<option class="zoomi" value="2177" data-icon="img/products/1056.png" alt="img/products/1056b.png" data-html-text="BSD WZA<i>2177 gr</i>">BSD WZA</option>

[JS](function($){

$.fn.zoomi = function() {

$(this).filter("option").each(function(){

if(!this.z) {

$(this).zoom1().mouseover(function(){$(this).zoom2().show();});

$(this.z).mouseout(function(){$(this).hide();}); }

});

return this;

}

$.fn.zoom1 = function() {

$(this).each(function(){

var e = this;

$(e).css({'position':'relative','z-index':'8'}).after(<option class="'+e.className+'">');

e.z = e.nextSibling;

$(e.z).removeClass("zoomi").addClass("zoom2").attr("data-icon",e.alt || e.src)

.css({'position':'absolute','z-index':'10'});

$(e.z).hide();

});

return this;

}

$.fn.zoom2 = function() {

var s = [];

this.each(function(){

var e = this;

if(!e.z) e = $(e).zoom1()[0]; s.push(e.z);

if(!e.z.complete) return;

if(!e.z.width) { $(e.z).show(); e.z.width=e.z.width; $(e.z).hide(); }

$(e.z).css({left:$(e).offsetLeft()-(e.z.width-e.scrollWidth)/2+'px',

top:$(e).offsetTop()-(e.z.height-e.scrollHeight)/2+'px'});

});

return this.pushStack(s);

}

$.fn.offsetLeft = function() {

var e = this[0];

if(!e.offsetParent) return e.offsetLeft;

return e.offsetLeft + $(e.offsetParent).offsetLeft(); }

$.fn.offsetTop = function() {

var e = this[0];

if(!e.offsetParent) return e.offsetTop;

return e.offsetTop + $(e.offsetParent).offsetTop(); }

$(function(){ $('img.zoomi').zoomi(); });

})(jQuery);[/JS]

Edited March 23, 2011 by choppylion

[Синдром]

choppylion - а пример рабочий имееться, что бы можно было в живую посмотреть?

[choppylion]

вот два первых изображения показывают как должен работать скрипт

http://www.sunsean.com/zoomi/