Question

我遇到了一个我相信的奇怪现象，我很想知道是否有人知道为什么会这样。我使用我创建的自定义jQuery幻灯片为摄影网站做了大量的图像处理，并遇到了一些问题。

我在这里有一个画廊：http://www.daemondeveloper.com/photography/gallery.php

我一直在添加一些调整此库中图像大小的功能，以便缩放到预览图像大小的大小。正如你所看到的，最后一张图片是全景的，并没有填满div的整个高度，即使我有javascript告诉它调整大小。

如果你刷新页面，javascript似乎突然工作，图片可以缩放它。

现在尝试点击女孩的全景照片，我的幻灯片将显示使用jQuery显示缩放和垂直居中的图像。以下功能可以处理单击图库中的小图像预览。

如果你看一下注释changeSize()函数的位置，那就是我使用函数和缩放不起作用的地方。然后我在显示幻灯片的.show（）函数后移动它，现在它可以工作了。所以看来显示：无;影响了javascript的触发方式，因为在我调试时，currentImg对象为null，就好像.slides选择器在设置为display：none;时不存在一样。这真的发生了吗？或者我只是看到其他东西的副作用？

如果确实发生这种情况，可能与我在第一次加载gallery.php页面时没有缩放的全景图像的第一个问题的原因有关。

$('.imgHolder').click(function(){
    currentPosition = $('.imgHolder').index(this);

    $('#slideShow').width(slideWidth);

  // Remove scrollbar in JS
  $('#slideContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides.css({
    'float' : 'left',
    'width' : slideWidth
  });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', (slideWidth * numberOfSlides));

    // Hide left arrow control on first load
    manageControls(currentPosition);

    $('#slideInner').css('margin-left' , slideWidth*(-currentPosition));

    //changeSize(); used to be here

    $('#filter').show();
    $('#photoWrap').show();

            //Change image scale and center
    changeSize();
});

这是执行缩放和居中的changeSize（）函数

 function changeSize(){

  currentSlide = $('.slide').get(currentPosition);
  currentImg = $(currentSlide).children('img:first')[0];
  imgRatio =  $(currentImg).height() / $(currentImg).width(); 

if(imgRatio < slideRatio)
{
    $(currentImg).addClass('landscape');
    //Vertically align
    var thisHeight = $(currentImg).height();
    $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

}else{
    $(currentImg).addClass('portrait');
}


}

Answer 1

$('#gallery ul li').each(function() {
    var img = $(this).children('div').children('img').first();
    var ratio = img.height() / img.width();
    var goal = img.parent('div').height() / img.parent('div').width();

    if (ratio < goal) {
        img.addClass('portrait');

        img.css('margin-left', -(img.width() / 2) + ($(this).children('div').width() / 2));
    } else {
        img.css('width', '100%');
    }
});

在这里，我从您的代码中删除了不必要的$()实例，因为您在设置img变量时已经选择了要调用方法的元素。我怀疑这种冗余是最终的问题，但它是一个很好的起点。

将代码更新为此，然后从那里进行调试。

编辑：

我想我发现了你的错误（好吧，我至少找到了一个）：

function configGallery()
{

var currentPosition;
var slides = $('.slide')
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
...
}

你知道这里有什么问题吗？您在var slides = $('.slide')之后忘记了分号，这可能是您的问题。老实说，我很惊讶你的任何脚本都运行了。缺少分号通常会使整个事情崩溃。

更新：

以下是一些选择器供您在有机会时删除$（）：

function changeSize(){

      currentSlide = $('.slide').get(currentPosition);
      currentImg = $(currentSlide).children('img').first();
      imgRatio =  $(currentImg).height() / $(currentImg).width(); 

    if(imgRatio < slideRatio)
    {
        $(currentImg).addClass('landscape');
        //Vertically align
        var thisHeight = $(currentImg).height();
        $(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));

    }else{
        $(currentImg).addClass('portrait');
    }
}

更新：

好的，我写了little fiddle来帮助您重新编写图像大小调整功能。我会努力把它搞砸并把它放在一个插件中。

更新：

这是一个快速而又脏的插件中的相同功能：http://jsfiddle.net/Wj3RM/3/ 虽然我并不高兴 - 我认为你可以更容易地进行调整和修改。

CSS显示会影响jQuery / Javascript吗？

1 个答案: