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 つの画像行すべての高さが 613px です。

2 つの画像コンテナーを制御して、その画像に基づいて独自の高さを計算する方法はありますか?現在は、最後の画像のサイズ変更の高さを計算し、それを他のすべてのコンテナーに適用するように見えます

高さを適用すると、100% の代わりに auto が機能しません。これは、画像が垂直コンテナーの高さに収まらないためです。

スクリプトを修正するにはどうすればよいですか?

4

1 に答える 1

0

はい、簡単な方法があります。しかし最初に: ギャラリー スクリプトは、内部のすべての画像の平均縦横比を計算します。この動作を変更する簡単な方法はありません。

しかし、この簡単な回避策を行うことができます: echt 2 の画像をそれぞれのギャラリーに配置してください!

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 に答える