k-yamadaのブログ

プログラミングのメモ

jquery.loupeを使ってみた

ソース:http://jdbartlett.com/loupe/

自分のアプリに組み込んで見たところ、画像上のmousemoveイベントが発生せず、ルーペが正常に動作しなかった。
以下のように、ソースコードにzIndexの指定を追加すると、正常に動作するようになった。


(jquery.loupe.js 50行目~)

$loupe = $('<div />')
	.addClass(options.loupe)
	.css({
		width: options.width,
		height: options.height,
		position: 'absolute',
		overflow: 'hidden',
		// 追加
		zIndex: 1
	})
	.append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute'))
	.mousemove(move)
	.hide()
	.appendTo('body');