Как я могу настроить лупу jquery для круглой линзы?

Question

Буду признателен за мысли любого ниндзя javascript / css о том, как я могу настроить:

https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js

Чтобы иметь круглую область масштабирования вместо прямоугольной? Существует возможность установить класс CSS для лупы.

Обратите внимание, что это вопрос о библиотеке, указанной выше. Я уже погуглил для других библиотек. Я хочу, чтобы размер JS был как можно меньше.

Answer 1

От разработчика loupe.js:

Вы можете взглянуть на лупу Криса Иуфера, которая немного больше моей и включает в себя несколько образцов, использующих css3 для получения круглой лупы:

http://chrisiufer.com/loupe/sample.html

в то время как мой использует абсолютно позиционированное изображение внутри div, он использует background-image для div и background-position для перемещения изображения, поэтому работает css3 border-radius.

Answer 2

Я предполагаю, что самый простой способ сделать это - использовать CSS3 border-radius, который поддерживается современными версиями всех веб-браузеров (IE не ниже версии 9).

Если у вас есть это в вашем JavaScript

$('selector').loupe({
    width: 150, // width of magnifier
    height: 150, // height of magnifier
    loupe: 'loupe' // css class for magnifier
});

Просто поместите это в свой CSS:

.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}

... и все старые версии IE будут просто показывать квадрат, что может быть хорошо в вашем случае?