2013-03-01 89 views
0

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

http://jsfiddle.net/rajkumart08/8YK2n/

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)) 
}, 

回答

0

当你添加你的链接设置错了风格,如果图像很小,它会延伸到宽阔的窗户。

<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> 
+0

我没有得到你....你可以在小提琴更新一个立方体http://jsfiddle.net/rajkumart08/8YK2n/ – user2045025 2013-03-01 22:16:32