VPF::Zoom - Форум программистов

sayber

Дата 1.3.2010, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

Репутация: нет
Всего: нет

Добрый день!

Есть скрипт http://www.affresco.ru/xml/html/js/jquery.jqzoom.js

В него я добавил переменную bgzoom которая содержит имя картинки.

выполняю

Код


<script type="text/javascript">
        
        $(document).ready(function() {
            $('button').click(function() {
             
               var valueTexture = $(this).val();
            var options = { bgzoom:valueTexture, };
            $(".jqzoom").jqueryzoom( options );

            });

        });
        

        </script>

При клике на картинку накладывается бекграунд который в скрипт передает переменная bgzoom:valueTexture но при клике на другой button переменная bgzoom:valueTexture остается с прошлым значением.

http://www.affresco.ru/xml/html/edit.html

Прошу помощи.
smile

P.S.
Еще есть пример http://www.artlebedev.ru/tools/technogrette/js/zoom/ но он корявый малек. Позиционирование увеличенного блока немного не правильное.

Это сообщение отредактировал(а) sayber - 1.3.2010, 17:30

--------------------

~~~~~~~~~~~~~~~~~~~~~~~~~~~WoW CafeSayber © Портфолио ~~~~~~~~~~~~~~~~~~~~~~~~~~~

12345c

Дата 1.3.2010, 23:25 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(sayber @ 1.3.2010, 17:02

)

но при клике на другой button переменная bgzoom:valueTexture остается с прошлым значением

не просто с прошлым, а с первым с момента загрузки страницы, бывшим на момент клика.

Тут похоже, что hover в jQuery не выполняет removeEventListener/detachEvent.

вставтье этот код вместо jquery.jqzoom.js, и будет работать (заменил
html/images/"+valueTexture+"
на
html/images/"+settings.bgzoom+"
)

Код


var valueTexture = "";

$.fn.jqueryzoom = function(options){
        var settings = {
                xzoom: 200,        //zoomed width default width
                yzoom: 200,        //zoomed div default width
                offset: 50,        //zoomed div default offset
                position: "right" ,//zoomed div default position,offset position is to the right of the image
                lens:1, //zooming lens over the image,by default is 1;
                preload: 1,
                bgzoom: "",

            };
        
    //    settings.bgzoom = "";

            if(options) {
                $.extend(settings, options);
            }

            var noalt='';
       //alert([settings.bgzoom]) //проверка 1
       var t=this;
       var f1;
         f1=function(){
              
            var imageLeft = $(this).offset().left;                
            var imageTop = $(this).offset().top;

               
            var imageWidth = $(this).children('img').get(0).offsetWidth;
            var imageHeight = $(this).children('img').get(0).offsetHeight;


            noalt= $(this).children("img").attr("alt");

            var bigimage = $(this).children("img").attr("jqimg");

            $(this).children("img").attr("alt",'');

            if($("div.zoomdiv").get().length == 0){
            
    //alert([valueTexture, settings.bgzoom]); //проверка 2
            
                $(this).after("<div class='zoomdiv'><div style=\"background-image:url(http://affresco.ru/xml/html/images/"+settings.bgzoom+".png); z-index:20000px; height:1400px; width:1400px; position:absolute;\"></div><img class='bigimg' src='" + bigimage + "'/></div>");


            $(this).append("<div class='jqZoomPup'>&nbsp;<br /><br /><br /> +</div>");

            }


            if(settings.position == "right"){

            if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){

            leftpos = imageLeft  - settings.offset - settings.xzoom;

            }else{

            leftpos = imageLeft + imageWidth + settings.offset;
            }
            }else{
            leftpos = imageLeft - settings.xzoom - settings.offset;
            if(leftpos < 0){

            leftpos = imageLeft + imageWidth  + settings.offset;

            }

            }

            $("div.zoomdiv").css({ top: imageTop,left: leftpos });

            $("div.zoomdiv").width(settings.xzoom);

            $("div.zoomdiv").height(settings.yzoom);

            $("div.zoomdiv").show();

            if(!settings.lens){
              $(this).css('cursor','crosshair');
            }




                   $(document.body).mousemove(function(e){



                   mouse = new MouseEvent(e);

                   /*$("div.jqZoomPup").hide();*/


                    var bigwidth = $(".bigimg").get(0).offsetWidth;

                    var bigheight = $(".bigimg").get(0).offsetHeight;

                    var scaley ='x';

                    var scalex= 'y';


                    if(isNaN(scalex)|isNaN(scaley)){

                    var scalex = (bigwidth/imageWidth);

                    var scaley = (bigheight/imageHeight);




                    $("div.jqZoomPup").width((settings.xzoom)/scalex );

                    $("div.jqZoomPup").height((settings.yzoom)/scaley);

                    if(settings.lens){
                    $("div.jqZoomPup").css('visibility','visible');
                    }

                   }

                    

                    xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;

                    ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;

                    if(settings.lens){

                    xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?  (imageWidth -$("div.jqZoomPup").width() -2)  : xpos;

                    ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2  > imageHeight + imageTop ) ?  (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;

                    }


                    if(settings.lens){

                    $("div.jqZoomPup").css({ top: ypos,left: xpos });

                    }



                    scrolly = ypos;

                    $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;

                    scrollx = xpos;

                    $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


                    });
            };
          
            var t=this;
            this[0].addEventListener('mouseover', f1, !1);

            
            this[0].addEventListener('mouseout', function(){
                t[0].removeEventListener('mouseover', f1, !1);
                $(this).children("img").attr("alt",noalt);
                $(document.body).unbind("mousemove");
                if(settings.lens){
                    $("div.jqZoomPup").remove();
                }
                $("div.zoomdiv").remove();

            },!1);

        count = 0;

        if(settings.preload){


        $(this).each(function(){

        var imagetopreload= $(this).children("img").attr("jqimg");

        var content = jQuery('div.jqPreload'+count+'').html();

        jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');

        });

        }

}

$(document).ready(function() {
  $('button').click(function() {
      
      valueTexture = $(this).val();
      var options = { bgzoom:valueTexture };

      $(".jqzoom").jqueryzoom( options );
});


});



function MouseEvent(e) {

this.x = e.pageX;
this.y = e.pageY;

}

Правда, есть косяк - при нажатии нескольких кнопок без захода на картинку срабатывает первая и срабатывает только при 1 заходе. Из постановки следует, что лучше не пытаться улавливать settings.bgzoom в замыкании (кнопок много, а цель одна), а приписать его как свойство самой картинки ( $(".jqzoom")[0].bgzoom ) и брать так же, как брали valueTexture . И удалить t[0].removeEventListener('mouseover', f1, !1); , чтобы работало при всех заходах (mouseover). Тогда вопрос с hover снимается и к нему можно вернуть код.

Добавлено через 48 секунд
(Да, работает для простоты только в FF.)

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

sayber

Дата 1.3.2010, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.7.2006
Где: Moscow - qwerty

Репутация: нет
Всего: нет

Спасибо, примерно так и сделал.

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »