Question

我不知道如何调整灯箱的窗口大小.... 当我点击立方体灯箱打开.... 我在灯箱中给出了链接，但问题是当灯箱打开时，灯箱的宽度尺寸在打开时不合适......

 onClick: function() {
    if (!Gallery._config.lightbox) return !1;
    Gallery._toggleOverlay(!0);
    Gallery._current = $(this).parent();
    var a = $(this),
        a = a.children('div[class="' + a.data("position") + '"]').children("img"),
        b = a.data("width"),
        c = a.data("height"),
        f = a.data("container_width"),
        h = a.data("container_height"),
        g = a.data("caption"),
        d = Gallery.window_width - 100,
        j = g ? Gallery.window_height - 180 : Gallery.window_height - 120;
    if (b > d || c > j) {
        var k = b / c;
        k < d / j ? (c = j, b = k * c) : (b = d, c = b / k)
    }
    var m = $("<div>").addClass("caption").html(g ? g : ""),
        n = $("<img>").attr("src", a.attr("src")).width(f).height(h),
        d = $("<div>").addClass("prev").attr("title", "Previous").click(Gallery._prev),
        j = $("<div>").addClass("next").attr("title", "Next").click(Gallery._next);
    Gallery._lightbox = $("<div>").attr("id", "melonhtml5_lightbox").append(n).append(m).append(d).append(j).appendTo($(document.body)).data("container", {
        left: a.offset().left,
        top: a.offset().top,
        width: f,
        height: h,
        caption: g
    });
    var l = $(window).scrollTop(),
        e = $(window).scrollLeft(),
        d = function() {
            n.animate({
                width: b,
                height: c
            }, Gallery.lightbox_speed);
            Gallery._lightbox.animate({
                left: Gallery.window_width / 2 - b / 2 + e,
                top: Gallery.window_height / 2 - c / 2 + l
            }, Gallery.lightbox_speed, function() {
                g && m.animate({
                    height: 30
                }, Gallery.lightbox_speed)
            })
        };
    switch (Gallery._config.animation) {
        case "default":
            Gallery._lightbox.css({
                left: a.offset().left,
                top: a.offset().top
            });
            Gallery._lightbox.animate({
                left: Gallery.window_width / 2 - f / 2 + e,
                top: Gallery.window_height / 2 - h / 2 + l
            }, Gallery.lightbox_speed, d);
            break;
        case "drop":
            Gallery._lightbox.css({
                left: Gallery.window_width / 2 - f / 2 + e,
                top: -1 * h + l
            });
            Gallery._lightbox.animate({
                top: Gallery.window_height / 2 - h / 2 + l
            }, Gallery.lightbox_speed, d);
            break;
        case "slide":
            Gallery._lightbox.css({
                left: -1 * f + e,
                top: Gallery.window_height / 2 - h / 2 + l
            }), Gallery._lightbox.animate({
                left: Gallery.window_width / 2 - f / 2 + e
            }, Gallery.lightbox_speed, d)
    }
    Gallery._config.slideshow && !Gallery._in_slideshow && (Gallery._in_slideshow = !0, setTimeout(Gallery._slideshow, Gallery._config.slideshow_speed))
},

Answer 1

当您添加链接时，您设置了错误的样式，如果图像较小，则会转到宽窗口。

<div class="caption" style="height: 30px; text-align: right;">
   <a style="font-size: 18px;" href="/Sales/order/">Create</a> 
   <div> 
     <a href="/Sales/" style="font-size: 18px;">View/Edit</a> 
   </div> 
   <a style="&nbsp;font-size: 18px;">Labels</a>
</div>

您需要更改所有标签，例如

 <div class="cubeCell" data-text="Search" data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://intra.defie.co/images/Desktop_icons_02.07.13/search.png"><div class="cubeTextStyle">Search</div></div>

打开时灯箱尺寸不合适

1 个答案: