Реализация скрипта при просмотре в режиме лупы

[ale10ey]

Доброе время суток,

1. Есть несколько изображений и если навести курсор на изображение, то будет увеличиваться изображение в пределах этого изображение, т.е подключается скрипт лупы

<script type="text/javascript" src="js/loupe.js"></script>

Код:

<script>
$(document).ready(function(){
$('.pirobox').loupe({
    height: 110,
    width: 150,
    loupe: 'loupe'
})
});
</script>

размеры окна лупы можно менять изменяя параметры в коде выше.

2. Вопрос. Хотел бы реализовать, чтобы когда пользователь "водит" курсором по изображению и просматривает его с помощью лупы, то было бы здорово, если бы он мог кликнуть по этому изображению и появилось бы 2 изображение.

3. Сразу поясню, что 2 изображение уже имеется и оно появляется, когда пользователь кликнул по 1 изображению, т.е сработал скрипт и 2 (увеличенное) изображение плавно появилось, это все работает.
Когда подключил скрипт лупы и прописал класс, то просматривать на мальком изображении с помощью лупы 2 изображение можно, но посмотреть его в реальном масштабе нельзя, так как скрипт лупы "накладывается" на маленькое изображение.

4. Вот так выглядит html разметка:

<h5><img src="img/image_Big.png" alt="" /><a href="img/image_Big.png" class="pirobox">Увеличить изображение</a></h5>

<a href="img/image_Big.png" class="pirobox"><img src="img/gallery/image_Small.png" alt="" /></a>

Скрипт pirobox мы с вами разбирали в какой-то теме, работает он нормально, как видно из кода если кликнуть по ссылке или изображению, то сработает скрипт pirobox и появится 2 изображение, а сейчас подключается скрипт лупы (1 пункт) и как я писал хотел бы реализовать, также и не только просмотр в режиме лупы, но и клик чтобы работал.

5. Код скрипта лупы (<script type="text/javascript" src="js/loupe.js"></script> )

  loupe.rar (Размер: 662 байт / Загрузок: 2)

Остальной код в пункте 1.
Пытался сам реализовать, но не выходит, по сути нужно добавить в код loupe.js несколько строчек или даже одну, например, но такой вариант не срабатывает.

Код:

$("a.pirobox").on("click",function(d) { $(".pirobox").css("display","block"); });

Заранее благодарен.

[Admin]

Предлагаю "поковырять" код в loupe.js.

Конечно, полного кода Вашей странички у меня нет, но могу предложить следующее:
В файле loupe.js перед кодом:

Код:

.appendTo('body');

добавляем:

Код:

.click(new_piro)

А перед кодом:

Код:

move = function (e) {

Добавляем строчку:

Код:

new_piro = function (e) {$(".pirobox").css("display","block");alert('***');}

alert('***'); нужно для проверки срабатывания клика мышкой. Если на экране появляется надпись, то этот код можно удалить, т.к. проверка пройдена.

[ale10ey]

Доброе время суток, проверил и не совсем понятно, где вы

1. В файле loupe.js перед кодом:

Код:

.appendTo('body');

добавляем:

Код:

.click(new_piro)

Тут, все понятно, добавил в loupe.js

Цитата:.click(new_piro

и скрипт лупы перестал работать, так как 2 часть кода еще не вставлена.

2. А перед кодом:

Код:

move = function (e) {

Добавляем строчку:

Код:

new_piro = function (e) {$(".pirobox").css("display","block");alert('***');}

Такой код move = function (e) в loupe.js я не нашел, может быть вы имели ввиду .mousemove(e), на всякий случай весь код loupe.js, код небольшой:

Код:

(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().[color=#98FB98]click(new_piro)[/color].appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));​

В скрипте я уже добавил click(new_piro).appendTo("body");

Со 2 частью кода пока непонятно...

[Admin]

Я просто скачал не сжатый код для доработки и не учел, что в сжатой версии все переменные совсем другие.

В приведенном Вами файле loupe.js перед кодом:

Код:

.appendTo("body");

добавляем:

Код:

.click(new_piro)

А перед кодом:

Код:

e=function(p){var

Добавляем строчку:

Код:

new_piro=function(e){$(".pirobox").css("display","block");alert('***');}

[ale10ey]

Проверил, к сожалению, не работает...при наведении курсора на изображение, скрипт лупы не подключается, т.е просмотр в режиме увеличения не работает совсем.

Весь код:
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}new_piro=function(e){$(".pirobox").css("display","block");alert('***');}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().click(new_piro).appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));​

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

[Admin]

Ошибку то хоть какую-то выдает? Скачайте файл из прикрепления. С ним у меня работает.

[ale10ey]

(26.12.2015 16:12:05)Admin писал(а):  Ошибку то хоть какую-то выдает? Скачайте файл из прикрепления. С ним у меня работает.

Доброе время суток, выдается окно и ***, как указано в alert('***');



Если нажать OK, то окно закроется, далее также по всем изображениям...

[Admin]

Значит, скрипт работает (клик отлавливает) и alert('***'); можно удалить из JS-кода.

Останется код: $(".pirobox").css("display","block");, который и будет отвечать за появление которого изображения со стилем pirobox.

[ale10ey]

(26.12.2015 18:34:25)Admin писал(а):  Значит, скрипт работает (клик отлавливает) и alert('***'); можно удалить из JS-кода.

Останется код: $(".pirobox").css("display","block");, который и будет отвечать за появление которого изображения со стилем pirobox.

Доброе время суток, проверил и пока результата нет.
Сделал отдельную страницу, подключил скрипты, стили и сейчас наглядно можно посмотреть, что получается.


  loupe.rar (Размер: 112.65 Кб / Загрузок: 2)

Если удалить alert('***'); - окошко после клика пропадает и скрипт лупы перестает работать, можно проверить на странице, что происходит после клика по изображению.

...и еще один вопрос, если подвести указатель к любой из границ изображения, то появляется другой курсор, пробовал средствами сss реализовать, чтобы курсора fullsize.cur не было видно, но не выходит. Хотел бы оставить данный курсор, на тот случай, если по каким-то причинам скрипт лупы не сработает, то будет работать скрипт pirobox.
Вы можете попробовать подвести курсор к любой из границ изображения и курсор появится, далее он пропадает и срабатывает скрипт лупы.

Заранее благодарен .

[Admin]

Все оказалось еще гораздо проще.
Просто Вы сами меня сбили кодом из первого сообщения:

PHP код:

$("a.pirobox").on("click",function(d) { $(".pirobox").css("display","block"); }); 


Вот я и пытался добиться изменения стиля у элемента с классом pirobox.

Просто скачайте прикрепленный к данному сообщению файл loupe.min.js

С курсорами сам пока не знаю.