1

我相信我遇到了一个奇怪的现象，我想知道是否有人知道为什么会发生这种情况。我一直在使用我创建的自定义 jQuery 幻灯片对摄影网站进行大量图像处理，但遇到了一些问题。

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

我一直在添加一些函数来调整这个画廊中的图像大小，以便它们缩放到预览图像大小的大小。如您所见，最后一张图像是全景的，即使我有 javascript 告诉它调整大小，也不会填满 div 的整个高度。

如果您刷新页面，javascript 似乎会突然工作，并且图片会按应有的方式缩放。

现在尝试单击女孩的全景图片，我的幻灯片将出现，显示使用 jQuery 缩放和垂直居中的图像。下面的函数是处理单击图库中的小图像预览的函数。

如果您查看注释changeSize()函数的位置，那是我使用该函数的位置并且缩放不起作用。然后我将它移到显示我的幻灯片的 .show() 函数之后，现在它可以工作了。所以看起来 display:none; 影响了 javascript 的触发方式，因为当我调试时，currentImg 对象为空，就好像 .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');
}


}
4

1 回答 1

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');
    }
}

 

更新：

好的，我给你写了一个小小提琴来帮助你重新编写你的图像大小函数。我会努力完善它并将其放入插件中为您服务。

更新：

这是一个快速而肮脏的插件中的相同功能：http: //jsfiddle.net/Wj3RM/3/ 虽然我没有把它美化 - 我认为这样适应和修改会更容易。

于 2012-07-31T18:40:58.530 回答