1

ギャラリーの画像が水平 (行ごとに 1 つの画像) または垂直 (行ごとに 2 つの画像) の場合に応じて、行ごとに自動的にギャラリーの画像を合わせることができました。

今の問題は、画像をスケーラブルにしたい (ウィンドウのサイズ変更時にサイズを変更する) ことですが、それを実現する方法がわかりません。どうやって作ればいいの？

これは私のコードです:

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

function Gallery(selector){

this.add_module = function(type, image){
    var container = $('<div />' , {
        'class' : 'gallery_container'
    }).append(image);
    if(type == 'horizontal'){
        var h_ar = image.attr('height') / image.attr('width');
        container.css({
            'width' : selector.width(),
            'height' : selector.width()*h_ar
        })
    }
    if(type == 'vertical'){
        container.css({
            'width' : v_width,
            'height' : v_height
        })
    }
    container.appendTo(selector);
    container.children('img').fitToBox();
}
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;
// iterates through images looking for verticals
selector.children('img').each(function(){
    if($(this).attr('width') < $(this).attr('height')){
        v_counter++;
        h_pxls += $(this).attr('height');
        w_pxls += $(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_ar = h_avrg/w_avrg;
var v_width = (selector.width())/2;
var v_height = v_width*v_ar;
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));
    }
})
selector.isotope({
    masonry: {
        columnWidth: selector.width() / 2
    }
});

}

4

2 に答える 2

0

これは CSS で解決する方がよいでしょう。img の幅を 100% に設定するだけで、親のサイズで縮小されます。以下の例では、.container がウィンドウの 25% を占め、img がその 100% を占めています。firebug を使用してコンテナーの幅を変更し、違いを確認できます。

<DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 25%;
        }
        .container img {
            width: 100%;
        }
    </style>
</head>
<body>

    <div class="container">
        <img src="http://ldlocal.web44.net/test2/img/gallery0.jpg">
    </div>

</body>
</html>
于 2013-02-21T17:17:51.847 に答える
0

画像を含むコンテナにパーセンテージを使用します（幅と高さの両方）..次に、画像の幅と高さにもパーセンテージを使用します（100％である必要はありません。その容器）

于 2013-02-21T16:50:13.890 に答える