Question

我在互联网上搜索了一个允许我同时缩放图像的灯箱。现在我只找到了付出很多钱的解决方案。所以我决定拿两个插件并一起使用它们。到目前为止我遇到了一些问题......

几个小时后，我决定建立自己的灯箱并使用缩放插件。到目前为止我很好。它打开，缩放工作。如果我点击并按住我可以改变缩放比例...如果我离开图像并返回（鼠标悬停/鼠标移开）它会关闭缩放（实际上什么都可以）但是当我再次使用它时，它将不会再次开始变焦。我知道它，因为我解除了点击，但我必须这样做。否则它将不适用于其他图像。我不知道在哪里重新绑定它以及如何以太：）

所以主要的问题是：有人能解释我如何解开绑定并正确绑定以解决我的问题吗？

（如果我能在我的问题上做得更好，请发表评论，不要更新我的帖子）

所以我有以下代码

这是 FIDDLE 所以你可以看到它

编辑：我编辑了我的小提琴，因为我为tjpzoom.js添加了一个函数

function TJPunbind()
{
    console.log(obj);
}

关于它的奇怪之处是......我通常想检查对象是否仍然存在于tjpzoom的正常调用之外但是当我在obj上调用console.log（包含zoomfile数据）时，缩放功能工作正常，几乎就像我希望它工作。但是console.log（obj）

上没有输出

我的jQuery

/** Lightbox inkl. Zoomer **/
var overlay = "<div class='lbOverlay'></div>";
var container = "<div class='lbContainer'><img src='' border='0' /></div>";
var blindimg = "<img id='blindimg' src='' style='display:none;' />";
$('body').append(overlay, container);


$('.imgContainer img').each(function () {


    $(this).on('click', function () {
        var width = 0;
        var height = 0;
        var faktor = 0;
        var max = 600;
        $('body').append(blindimg);

        var imagename = $(this).attr('src');
        /** Show Overlay **/
        $('.lbOverlay').fadeToggle(function () {



            /** Add IMG to Blindimg **/
            $('#blindimg').attr('src', imagename).load(function () {

                /** Get IMG Sizes **/
                width = $(this).width();
                height = $(this).height();

                /** Check if img size is bigger than max allowed **/
                if (width > max || height > max) {
                    if (width > height) faktor = width / max;
                    else faktor = height / max;

                    /** set new size **/
                    width = width / faktor;
                    height = height / faktor;
                }


                /** set up scale for image container **/
                var margin = '-' + height / 2 + 'px 0 0 -' + width / 2 + 'px';
                $('.lbContainer').css({
                    'width': width,
                        'height': height,
                        'margin': margin
                });

                /** set showen image **/
                $('.lbContainer img').attr('src', imagename).css({
                    'width': width,
                        'height': height
                });
                //console.log(width + 'x' + height);

            });

            /*
            function showZoom(element,item,image){
                $(element).click(function(){
                    TJPzoom(item,image);
                });
            }
            */

            function mouseIn() {
                $('img', this).css('cursor', 'all-scroll');
            }

            function mouseOut() {
                console.log('do some else');

            }

            /** Show Container **/
            $('.lbContainer').fadeToggle().click(function () {
                TJPzoom($('img', this)[0], imagename);
                /** unbind click so zoomer won't be fired more than once **/
                $('.lbContainer').unbind('click');
            }).hover(mouseIn, mouseOut);



        }).click(function () {
            /** close lightbox **/
            $('.lbContainer').fadeToggle(); // fadeout Container
            $(this).fadeToggle(); // fadeout Overlay
            $(this).unbind();
            $('#blindimg').remove(); //remove blingimg (will be rebind on next click)
        });

    });
});

我的HTML

<body>
    <div class='imgContainer'>
        <img src="http://miriadna.com/desctopwalls/images/max/Landscape-with-calm-river.jpg" alt="" width="" height="" border="0" />
    </div>
    <div class='imgContainer'>
        <img src="http://www.hdwallpaperstop.com/wp-content/uploads/2013/10/Mountain-Landscape-Desktop-Wallpaper.jpg" alt="" width="" height="" border="0" />
    </div>
    <div class='imgContainer'>
        <img src="http://www.hdwallpaperstop.com/wp-content/uploads/2013/05/Beautiful-Landscape-Pictures-of-nature.jpg" alt="" width="" height="" border="0" />
    </div>
</body>

我的CSS

.imgContainer {
    float: left;
    margin-right: 10px;
}
.imgContainer img {
    max-width: 150px;
}
.lbOverlay {
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    display: none;
    z-index: 1000;
}
.lbContainer {
    left: 50%;
    top: 50%;
    background: white;
    position: absolute;
    display: block;
    padding: 5px;
    display: none;
    z-index: 1001;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 3px 4px 12px 3px #333;
    box-shadow: 3px 4px 12px 3px #333;
}
.lbContainer img {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

如何在点击解除绑定后重新绑定事件

0 个答案: