Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблемы с zoom для jquery (https://javascript.ru/forum/jquery/27012-problemy-s-zoom-dlya-jquery.html)

nematod 31.03.2012 04:27

Проблемы с zoom для jquery
 
Привет. Помоги.

Увеличиваю картинки (подгружаемые ajax) вешая на них событе:
$("a.zoom").live("click", function(event) { ...


Суть проблемы. Работает только на первой картинке.

zebra 31.03.2012 12:22

live на картинки вроде не прокатывает

nematod 31.03.2012 20:48

Всё работает когда картинки загружаются обычным способом.
live цепляется на ссылку а не на картинку:
<a href='".$row_goods[img]."' class='zoom'><img src='".$row_goods[img]."' width='120px' /></a>

Где $row_goods[img] - адрес картинки.

nematod 31.03.2012 21:02

(function($){
    var placeToCenter = false; // этот параметр отвечает за размещение картинки

    var bpOff = 0;
    var bpWidth = 0;
    var bpHeight = 0;
    var bpcLeft = 0;
    var bpcTop = 0;
    
    var zoomWidth = 0;
    var zoomHeight = 0;
    
    var width_array = new Array();
    var height_array = new Array();
    
    var screenWidth = 0;
    var screenHeight = 0;
    var screenScroll = 0;
    var scrLeft = 0;
    var scrTop = 0;
    
    var localTop = 0;
    var localLeft = 0;
    
    var zoomTrash = '<div id="bigGrey"></div>\r<div class="zoomShadow"><table><tr><td class="zs1"><b></b></td><td class="zh1"><b></b></td><td class="zs2"><b></b></td></tr><tr><td class="zv1"><b></b></td><td><div class="zoomBase"></div></td><td class="zv2"><b></b></td></tr><tr><td class="zs3"><b></b></td><td class="zh2"><b></b></td><td class="zs4"><b></b></td></tr></table></div>\r';
	var zoomX = '<a href="#" class="zoomX"></a>\r';

    var firstClick = true;
    var galNum = 0;
    var oldZoom = 0;
    var currentZoom = 0;
    var oldW = 0;
    var oldH = 0;
    var oldOf = 0;
    var clicked = false;
    var strashno = false;
    var allLoaded = false;
    var loadStatus = 0;
    
    $("a.zoom").live("click", function(event) {
        event.preventDefault();
        $(this).blur();
        $("a.zoomX").remove();
        $("select").addClass("selOff");
        
        bpOff = $(this).offset();
        bpWidth = $(this).find("img").width();
        bpHeight = $(this).find("img").height();
        if(bpWidth === null) {
            bpWidth = $(this).width();
            bpHeight = $(this).height();
        }
        bpcLeft = Math.round(bpOff.left + (bpWidth / 2));
        bpcTop = Math.round(bpOff.top + (bpHeight / 2));
        
        screenScroll = $(window).scrollTop();
        screenWidth = $("body").innerWidth();
        screenHeight = $(window).height();
        
        scrLeft = Math.round(screenWidth / 2);
        scrTop = Math.round(screenScroll + (screenHeight / 2));
        
        if(firstClick === true){
			$("body").append(zoomTrash);
            galNum = $(".zoom").length;
            for(var i = 0; i < galNum; i++) {
                $(".zoom:eq(" + i + ")").addClass("myZoom" + i);
            }
            $("body").append('<img id="zoomLoading" src="zoom/zoom-load.gif" />\r')
            $("#zoomLoading").css("left", bpcLeft - 11).css("top", bpcTop - 11);

            for(var i = 0; i < galNum; i++) {
                var zoomUrl = $(".myZoom" + i).attr("href");
                $("body").append('<img class="zoomPic" src="' + zoomUrl + "?" + Math.random()*10 +  '" id="zoomPic' + i + '" />\r')
            }
            
            currentZoom = $(this).attr("class");
            currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));
            currentZoom = currentZoom.slice(6);
            oldZoom = currentZoom;
            
            for(var i = 0; i < galNum; i++) {
                $("#zoomPic" + i).load(function() {
                    loadStatus++;
                    var localId = $(this).attr("id").slice(7);
                    width_array[localId] = $(this).width();
                    height_array[localId] = $(this).height();
                });
            }
            
            var loading = setInterval(waitForPics, 50);
            firstClick = false;
        } else {
            oldZoom = currentZoom;
            currentZoom = $(this).attr("class");
            currentZoom = currentZoom.slice(currentZoom.indexOf("myZoom"));
            currentZoom = currentZoom.slice(6);
            showPic();
        }
        
        function waitForPics() {
            if(loadStatus === galNum) {
                $("#zoomLoading").remove();
                clearInterval(loading);
                showPic();
            }
        }
    });

...

nematod 31.03.2012 21:07

...
    function showPic() {

        zoomWidth = width_array[currentZoom];
        zoomHeight = height_array[currentZoom];
        
        var ratio = zoomWidth / zoomHeight;
        
        //check size
        if(zoomHeight > screenHeight - 45) {
            zoomHeight = screenHeight - 45;
            zoomWidth = zoomHeight * ratio;
        } else if(zoomWidth > screenWidth - 50) {
            zoomWidth = screenWidth - 50;
            zoomHeight = zoomWidth / ratio;
        }
        
        oldW = $(".myZoom" + oldZoom + " img").width();
        oldH = $(".myZoom" + oldZoom + " img").height();
        oldOf = $(".myZoom" + oldZoom + " img").offset();
		
        if(oldW === null) {
            oldW = $(".myZoom" + oldZoom).width();
            oldH = $(".myZoom" + oldZoom).height();
            oldOf = $(".myZoom" + oldZoom).offset();
        }
        
        if(placeToCenter === false) {
            // in place

            //check place
            localTop = bpcTop - (zoomHeight / 2);
            if(localTop < screenScroll + 20) {localTop = screenScroll + 20};
            if(localTop + zoomHeight > screenScroll + screenHeight - 20) {localTop = screenScroll + screenHeight - zoomHeight - 20};
            localLeft = bpcLeft - (zoomWidth / 2);
            if(localLeft < 20) {localLeft = 20};
            if(localLeft > screenWidth - zoomWidth - 25) {localLeft = screenWidth - zoomWidth - 25};
            
            $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);

            $("#zoomPic" + currentZoom).animate({
                width:zoomWidth,
                height:zoomHeight,
                left:localLeft,
                top:localTop
            }, 200, setShadow);
            
            if(currentZoom !== oldZoom && strashno === false) {
                removeShadow();
                $("#zoomPic" + oldZoom).animate({
                    width:oldW,
                    height:oldH,
                    left:oldOf.left,
                    top:oldOf.top
                }, 200, removeOld);
            }
            
            strashno = false;
        } else {
            // in center
            
            //check place
            localTop = (screenHeight / 2) - (zoomHeight / 2);
            localLeft = (screenWidth / 2) - (zoomWidth / 2);
            
            $("#bigGrey").addClass("bigGrey").height($("body > div").innerHeight());
            
            $("#zoomPic" + currentZoom).css("top", bpOff.top).css("left", bpOff.left).css("width", bpWidth).css("height", bpHeight);

            $("#zoomPic" + currentZoom).animate({
                width:zoomWidth,
                height:zoomHeight,
                left:localLeft,
                top:localTop + $(window).scrollTop()
            }, 200, setShadow);
            
            if(currentZoom !== oldZoom && strashno === false) {
                removeShadow();
                $("#zoomPic" + oldZoom).animate({
                    width:oldW,
                    height:oldH,
                    left:oldOf.left,
                    top:oldOf.top
                }, 200, removeOld);
            }
            
            strashno = false;
        }
    };
    
    function setShadow() {
        clicked = false;
        var zsLeft = localLeft - 6;
        var zsTop = localTop - 6;
        if(placeToCenter === false) {
	        $("div.zoomShadow").css("left", zsLeft).css("top", zsTop);
		} else {
	        $("div.zoomShadow").css("left", zsLeft).css("top", zsTop).css("position", "fixed");
		}
        $("div.zoomShadow div.zoomBase").width(zoomWidth - 8).height(zoomHeight - 8);
        
        for(var i = 0; i < galNum; i++) {
            if(i !== parseInt(currentZoom)) {
                $("#zoomPic" + i).css("top", -9999).css("left", -1000).css("width", width_array[i]).css("height", height_array[i]);
            }
        }
        
        $("#zoomPic" + currentZoom).click(function(event){
            $("a.zoomX").remove();
            hideCurrent();
        });
        
        $("body").append(zoomX);
        if(placeToCenter === false) {
			$("a.zoomX").css("left", localLeft + zoomWidth - 16).css("top", localTop - 17);
		} else {
			$("a.zoomX").css("left", localLeft + zoomWidth - 16).css("position", "fixed").css("top", localTop - 17);
		}
        
        $("a.zoomX").click(function(event){
            event.preventDefault();
            $("a.zoomX").css("position", "absolute").remove();
            hideCurrent();
        });
        $("select").addClass("selOff");
		
        if(placeToCenter === true) {
			$("#zoomPic" + currentZoom).css("position", "fixed").css("top", localTop);
		}
    }
    function removeShadow() {
        $("div.zoomShadow").css("top", -9999).css("left", -1000).css("position", "absolute");
    }
    
    function removeOld() {
        $("#zoomPic" + oldZoom).css("top", -9999).css("left", -1000).css("width", width_array[oldZoom]).css("height", height_array[oldZoom]).css("position", "absolute");
    }
    
    function hideCurrent() {
        if(clicked === false) {
            $("#bigGrey").removeClass("bigGrey").height(0);
            $("select").removeClass("selOff");
            oldZoom = currentZoom;

            oldWidth = width_array[oldZoom];
            oldHeight = height_array[oldZoom];
            
            oldW = $(".myZoom" + oldZoom + " img").width();
            oldH = $(".myZoom" + oldZoom + " img").height();
            oldOf = $(".myZoom" + oldZoom + " img").offset();
            if(oldW === null) {
                oldW = $(".myZoom" + oldZoom).width();
                oldH = $(".myZoom" + oldZoom).height();
                oldOf = $(".myZoom" + oldZoom).offset();
            }

            removeShadow();
			
			if(placeToCenter === false) {
				$("#zoomPic" + oldZoom).animate({
					width:oldW,
					height:oldH,
					left:oldOf.left,
					top:oldOf.top
				}, 200, removeOld);
			} else {
				$("#zoomPic" + oldZoom).animate({
					width:oldW,
					height:oldH,
					left:oldOf.left,
					top:oldOf.top - $(window).scrollTop()
				}, 200, removeOld);
			}
            
            strashno = true;
        }
        clicked = true;
    }
    
    $("#bigGrey").click(function() {
        $("a.zoomX").remove();
        hideCurrent();
    });
    
    $(window).keydown(function(event) {
        if(event.keyCode == '27') {
            $("a.zoomX").remove();
            hideCurrent();
        }
        if(event.keyCode == '39' && galNum > 1) {
            removeShadow();
            $("a.zoomX").remove();
            oldZoom = currentZoom;

            if(firstClick === false) {
                if(currentZoom < galNum - 1) {
                    currentZoom++;
                } else {
                    currentZoom = 0;
                }
            }

            bpOff = $(".myZoom" + currentZoom).offset()
            bpWidth = $(".myZoom" + currentZoom).find("img").width();
            bpHeight = $(".myZoom" + currentZoom).find("img").height();
            if(bpWidth === null) {
                bpWidth = $(".myZoom" + currentZoom).width();
                bpHeight = $(".myZoom" + currentZoom).height();
            }
            bpcLeft = Math.round(bpOff.left + (bpWidth / 2));
            bpcTop = Math.round(bpOff.top + (bpHeight / 2));
        
            showPic();
        }
        if(event.keyCode == '37' && galNum > 1) {
            removeShadow();
            $("a.zoomX").remove();
            oldZoom = currentZoom;

            if(firstClick === false) {
                if(currentZoom > 0) {
                    currentZoom--;
                } else {
                    currentZoom = galNum - 1;
                }
            }
            
            bpOff = $(".myZoom" + currentZoom).offset()
            bpWidth = $(".myZoom" + currentZoom).find("img").width();
            bpHeight = $(".myZoom" + currentZoom).find("img").height();
            if(bpWidth === null) {
                bpWidth = $(".myZoom" + currentZoom).width();
                bpHeight = $(".myZoom" + currentZoom).height();
            }
            bpcLeft = Math.round(bpOff.left + (bpWidth / 2));
            bpcTop = Math.round(bpOff.top + (bpHeight / 2));
            
            showPic();
        }
    });
	
	function clearCache() {
		firstClick = true;
		galNum = 0;
		oldZoom = 0;
		currentZoom = 0;
		oldW = 0;
		oldH = 0;
		oldOf = 0;
		clicked = false;
		strashno = false;
		allLoaded = false;
		loadStatus = 0;

		$("img.zoomPic").remove();
		$("a.zoomX").remove();
		removeShadow();
	}
})(jQuery);


Часовой пояс GMT +3, время: 18:40.