Question

我是Jquery的初学者，我在业余时间尽可能地教自己。我正在一个投资组合网站上工作，并找到了一个图片库的教程，该教程产生了以下代码。它的工作方式我希望它保存一件事 - 我希望灯箱中显示的图像响应浏览器的大小。我更喜欢使用CSS max-width和max-height属性来处理这个问题，但是，图像在HTML中设置为“data-large”属性：<img src="images/thumbnail.jpg" alt="alt text" data-large="images/largeGalleryImage.jpg"/>。单击缩略图图像将加载“data-large”中指定的图像，jquery根据该图像的像素尺寸调整图像大小。我不知道如何将CSS挂钩到这个更大的图像中，或者如果我可以，我根本没有足够的经验或知识来自己找出正确的解决方案。我四处寻找答案，但没有什么比较合适的。有没有办法可以将max-width / max-height CSS附加到数据大图像上，或者我可以编写一个可以起作用的函数吗？或者我是否需要废弃此代码并寻找其他解决方案？我到目前为止最接近的是通过添加“/ 2”编辑CW = large_img.width;和CH = large_img.height;变量，但我知道这不是正确的解决方法。

$(document).ready(function(){
var item, img, title, large_img;
var CW, CH, CL, CT, hpadding, vpadding, imgtag, width, height;

//Flag for preventing multiple image displays
var lb_loading = false;
var doc = $(document);

$("#portfolio figure").click(function(){
    if(lb_loading) return false;
    lb_loading = true;

    item = $(this);
    img = item.find("img");
    title = img.attr("alt");

    //Remove active class from previously clicked image
    $("#portfolio figure.active").removeClass("active");

    //Mark the clicked image as active for later use
    item.addClass("active");

    //The large image
    large_img = new Image();

    //Use data-large or the src itself if large image url is not available
    large_img.src = img.attr("data-large") ? img.attr("data-large") :
img.attr("src");

//Adding additional HTML - only if it hasn't been added before
    if ($(".lb_backdrop").length < 1)
    {
        var lb_backdrop = '<div class="lb_backdrop"></div>';
        var lb_canvas = '<div class="lb_canvas"></div>';
        var lb_previous = '<span class="lb_previous"><</span>';
        var lb_title = '<span class="lb_title"></span>';
        var lb_next = '<span class="lb_next">></span>';
        var lb_controls = '<div
class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
        var total_html = lb_backdrop+lb_canvas+lb_controls;

        $(total_html).appendTo("body");
    }

    //Fade in lightbox elements if they are hidden due to previous exit
    if($(".lb_backdrop:visible").length === 0)
    {
        $(".lb_backdrop, .lb_canvas, .lb_controls").fadeIn("slow");
    }

    //Disabling left/right controls on first/last items
    if(item.prev().length === 0){
        $(".lb_previous").addClass("inactive");}
    else{
        $(".lb_previous").removeClass("inactive");}
    if(item.next().length === 0){
        $(".lb_next").addClass("inactive");}
    else{
        $(".lb_next").removeClass("inactive");}

    //Centering lb_canvas
    CW = $(".lb_canvas").outerWidth();
    CH = $(".lb_canvas").outerHeight();

    //Top and left coordinates
    CL = ($(window).width() - CW)/2;
    CT = ($(window).height() - CH)/3;
    $(".lb_canvas").css({top: CT, left: CL});

    //Inserting the large image into .lb_canvas once it's loaded
    $(large_img).load(function(){
        //Recentering .lb_canvas with new dimensions
        CW = large_img.width;
        CH = large_img.height;          

        //.lb_canvas padding to be added to image width/height to get the
total dimensions
        hpadding = parseInt($(".lb_canvas").css("paddingLeft")) +
parseInt($(".lb_canvas").css("paddingRight"));
        vpadding = parseInt($(".lb_canvas").css("paddingTop")) +
parseInt($(".lb_canvas").css("paddingBottom"));
        CL = ($(window).width() - CW - hpadding)/2;
        CT = ($(window).height() - CH - vpadding)/3;                

        //Animating .lb_canvas to new dimensions and position
        $(".lb_canvas").html("").animate({width: CW, height: CH, top: CT,
left: CL}, 500, function(){
            //Inserting the image but keeping it hidden
            imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
            $(".lb_canvas").html(imgtag);
            $(".lb_canvas img").fadeTo("slow", 1);
            //Displaying the image title
            $(".lb_title").html(title);

            lb_loading = false;
            $(".lb_canvas").removeClass("loading");
        });
    });
});

//Click-based navigation
doc.on("click", ".lb_previous", function(){ navigate(-1); });
doc.on("click", ".lb_next", function(){ navigate(1); });
doc.on("click", ".lb_backdrop", function(){navigate(0); });

//Keyboard-based navigation
doc.keyup(function(e){
    //Keyboard navigation should work only if lightbox is active, which means
backdrop is visible
    if($(".lb_backdrop:visible").length === 1)
    {
        //Left
        if(e.keyCode === 37){ navigate(-1); }
        //Right
        else if(e.keyCode === 39){ navigate(1); }
        //Esc
        else if(e.keyCode === 27){ navigate(0); }
    }
});

//Navigation function
function navigate(direction)
{
    if(direction === -1) { //left
        $("#portfolio figure.active").prev().trigger("click");} 
    else if(direction === 1) { //right
        $("#portfolio figure.active").next().trigger("click");}
    else if(direction === 0) //exit
    {
        $("#portfolio figure.active").removeClass("active");
        $(".lb_canvas").removeClass("loading");
        //Fade out the lightbox elements
        $(".lb_backdrop, .lb_canvas, .lb_controls").fadeOut("slow", function(
{
            //empty canvas and title
            $(".lb_canvas, .lb_title").html("");
        });
        lb_loading = false;
    }
}
});

在Jquery图库中调整响应图像大小

0 个答案: