Question

我有一个简单的16x16网格缩略图，当点击一个时，我想要显示全尺寸的图像，背景变暗，div中的图像看起来漂浮在灰暗的背景上方。

我不想预先填充完整尺寸的

列表

$('#photo-grid').on('click', 'a', function(event) {
  $.getJSON($(this).attr('href'), function(data) {     // Gets the URL of full-sized image
    $('.page-cover').css('opacity', 0.6).fadeIn(300);  // Makes background appear to fade
    $('#lightbox-img').attr('src', data.url);          // Sets image src in hidden DIV
    $('#lightbox-img').one('load', function() {
      var lbi;
      lbi = $('#lightbox-img');

      console.log("lbi: " + (lbi.width()) + " x " + (lbi.height()));  // always 0
      console.log("lbi: " + (lbi.width()) + " x " + (lbi.height()));  // always 0

      $('.image-display').css('width', parseInt(lbi.css('width')).toString() + "4px")
        .css('padding-left', '2px');
      $('.image-display').css('height', parseInt(lbi.css('height')).toString() + "4px")
        .css('padding-top', '2px');

      return $('.image-display').css('opacity', 1.0).fadeIn(300);
    });
    return $('#lightbox-img').each(function() {
      console.log("triggering for cached image " + this.complete);
      if (this.complete) {
        return $(this).load();
      }
    });
  });
  return false;
});

所以这就是我无法理解的地方。在我做lbi = $('#lightbox-img');时，我知道图像已从服务器或本地缓存加载。但是，查询width()和height()函数以及CSS都没有显示图像的任何宽度或高度。我已经在Chrome和Safari调试器中逐步完成了这一操作，并且在加载图像时无法看到这些属性实际设置。

我知道有很多模态灯箱插件，但这是一个简单的代码片段似乎有点过分使用。我每次点击只显示一个图像，我可以用几行代码完成所有布局工作。

我在这里缺少什么？

Answer 1

你做的事我不太清楚为什么。例如，.css('width', parseInt(lbi.css('width')).toString() + "4px")基本上将宽度乘以10然后再加上4.

然而，当我把你的代码扔进小提琴http://jsfiddle.net/X9GWp/时，我没有得到你报告的问题，所以我不能说它为什么不适合你。我不得不对css，html和数据做出一些猜测，这可能就是为什么它不同了。如果你提供自己的小提琴，我可以看看。

无论如何，这是一个非常基本的lightbox松散地基于你的codesnippet，但没有从JSON请求获取image-url。

的javascript：

/* when lightbox is clicked, fade out */
$('.page-cover').on('click', function(){
    $(this).fadeOut(400);
    $('#lightbox-img').hide();
});

/* when image is loaded, fade in */
$('#lightbox-img').load(function(){
    $(this)
       .css('top', ($(window).height()-$(this).height())/2)
       .fadeIn(300);
});

/* when thumbnail is clicked, load href as image source and fadein lightbox-background*/
$('#photo-grid').on('click', 'a', function(event) {
    event.preventDefault();
    $('#lightbox-img').attr('src', $(this).attr('href'));
    $('.page-cover').fadeIn(300); 
});

的CSS：

.page-cover {
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,0.6);
    display:none;
}

#lightbox-img
{
    position:relative;
    display:block;
    margin:auto;
}

HTML：

<div id="photo-grid">
    <a href="http://lorempixel.com/200/200/nature/1"><img src="http://lorempixel.com/40/40/nature/1" /></a>
</div>

<div class="page-cover"><img id="lightbox-img" /></div>

http://jsfiddle.net/xLQpZ/

在屏幕上显示远程图像

1 个答案: