1

我在这个网站上工作

我正在使用此脚本调整垂直图像的大小：

function Gallery(selector) {
  this.add_module = function (type, image) {

    var portrait_text = image.next('.portrait_text');

    var container = $('<div />', {
      'class': 'gallery_container'
    }).append(image).append(portrait_text);

    if (type == 'horizontal') {
      var h_ar = image.attr('height') / image.attr('width');
      var c_width = selector.width();
      var c_height = selector.width() * h_ar
      container.css({
        'width': c_width,
        'height': c_height
      })
    }
    if (type == 'vertical') {
      var c_width = v_width;
      var c_height = v_height
      container.css({
        'width': Math.floor(v_width),
        'height': v_height
      })
    }
    container.css({
      'float': 'left',
    })
    container.find('img').attr({
      'width': '100%',
      'height': '100%'
    })
    container.attr('ar', c_height / c_width)
    container.appendTo(selector);

    //container.children('img').fitToBox();
  }

  this.resized = function () {
    //console.log(sel)
    $('.gallery_container').each(function () {
      if ($(this).attr('ar') >= 1) { // vertical
        $(this).css({
          'width': sel.width() / 2,
          'height': sel.width() / 2 * $(this).attr('ar')
        })
      } else { // horizontal
        $(this).css({
          'width': sel.width(),
          'height': sel.width() * $(this).attr('ar')
        })
      }
    })
  }
  var _this = this;
  var gutter = 0;
  // start vars for counting on vertical images
  var v_counter = 0;
  var w_pxls = 0;
  var h_pxls = 0;
  var v_ar;
  // iterates through images looking for verticals
  selector.children('img').each(function () {
    if (parseInt($(this).attr('width')) < parseInt($(this).attr('height'))) {
      v_counter++;
      h_pxls += $(this).attr('height');
      w_pxls += $(this).attr('width');
      v_ar = $(this).attr('height') / $(this).attr('width')
    }
  })
  // calculates average ar for vertical images (anything outside from aspect ratio will be croped)
  var h_avrg = Math.floor(h_pxls / v_counter);
  var w_avrg = Math.floor(w_pxls / v_counter);
  var v_width = Math.floor((selector.width()) / 2);
  var v_height = v_width * v_ar;
  var sel = selector;
  selector.children('img').each(function () {
    if (parseInt($(this).attr('width')) > parseInt($(this).attr('height'))) {
      _this.add_module('horizontal', $(this));
    } else {
      _this.add_module('vertical', $(this));
    }
  })
  $(window).bind('resize', _this.resized);
}

var gallery = new Gallery($('#gallery_images_inner'));

http://jsfiddle.net/mZ2Ks/

我遇到的问题是脚本使所有容器的高度相同（取决于我认为页面上的最后一个图像），因此例如第一个图像以不好的方式调整大小。如果您查看示例，所有 2 个图像行的高度均为 613 像素。

有什么办法可以控制每两个图像容器根据其图像计算它自己的高度，现在看起来它计算最后一个图像调整高度并将其应用于所有其他容器

应用 height: auto 而不是 100% 将不起作用，因为它不会使图像适合垂直容器的高度。

如何修复脚本？

4

1 回答 1

0

是的，有一个简单的方法。但首先：你的画廊脚本计算里面所有图像的平均纵横比。没有简单的方法可以改变这种行为。

但是你可以做这个简单的解决方法：把两张图片放在他们自己的画廊里！

var gallery1 = new Gallery($('#gallery_images_inner1'));
var gallery2 = new Gallery($('#gallery_images_inner2'));
var gallery3 = new Gallery($('#gallery_images_inner3'));

请参阅http://jsfiddle.net/mZ2Ks/2/ - 我不得不稍微清理一下您的 html 代码 - 您从（我假设）firebug 复制了“受 JavaScript 影响的”html 代码，但您应该复制纯 html直接来自源代码（Firefox 中的 CTRL + U）。

于 2013-03-19T21:50:09.237 回答