divの1枚おきに画像を貼り付けてください。

Question

画像のリストがあり、divの2つの画像をすべてラップしたいと思います。しかし、画像が風景の場合は、それを自分のdivにラップしたいと思います。

これまでの私のコードですが、それは肖像画のために働いていますが、景色も包み込んでいます。

$("#dps-inner").find('img').each(function (i) { 
    jQuery(this).height(600); 
    jQuery(this).width('auto'); 

    $(this).load(function() { 
     var width = jQuery(this).width(); 
     //console.log(width); 
     var height = jQuery(this).height(); 

     if (width > 600) { 
      jQuery(this).addClass("landscape"); 
     } 
     else { 
      jQuery(this).addClass("portrait"); 
     } 

     accum_width += width + 1 
     $("#dps-inner").width(w * i); 
    }); 
}); 

var images = $("#dps-outer").find("#dps-inner > img"); 

for (var i = 0; i < images.length; i += 2) { 
    images.slice(i, i + 2).wrapAll("<div class='images'></div>"); 
} 

は、私はまた、私はすべてがいったん風景画像をアンラップしようとした私は、私が間違ってやっているかわからないんだけど

var images = $("#dps-outer").find("#dps-inner > img.portrait"); 

for (var i = 0; i < images.length; i += 2) { 
    images.slice(i, i + 2).wrapAll("<div class='images'></div>"); 
} 

とさえ

var images = $("#dps-outer").find("#dps-inner > img"); 

for (var i = 0; i < images.length; i += 2) { 
    if (images.width() < 600) { 
     images.slice(i, i + 2).wrapAll("<div class='images'></div>"); 
    } 
} 

を試してみました完了しましたが、どちらも機能しません。コールバックがなくなり、すべてが同じタイミングで実行されているようです。

誰にでも何か提案がありますか？

私のバイオリンは、画面を広くする必要がありますとして仕事に行くのではなく、多分あなたは別のウィンドウで開くことができ、それはちょうど私が

http://jsfiddle.net/tara_irvine/r46XA/

をやろうとしているもののアイデアを得るためにです

Answer 1

私が正しくあなたを理解していれば、次の操作を行います。これは行いません

var outer = $("#dps-outer"); 

    // wrap adjacent .portrait elements 
outer.find("#dps-inner > img.portrait + img.portrait").each(function() { 
    var prev = $(this).prev('img.portrait'); 
    if(prev.length) { 
     prev.add(this).wrapAll("<div class='images'></div>"); 
    } 
}); 

    // wrap .landscape elements 
outer.find("#dps-inner > img.landscape").wrap("<div class='images'></div>"); 

    // wrap any lingering .portrait elements 
    // (usually an odd one between a pair of portraits, and a landscape) 
outer.find("#dps-inner > :not(img.portrait) + img.portrait").wrap("<div class='images'></div>"); 

を唯一のものは奇数との契約がportrait画像の番号が付けられています。あなたはそれらと何をするべきかを記述する必要があります。

奇数.portraitは、それ自体でラップされ、再配置されたくないと思っていると思います。

---

JSFIDDLE DEMOデモは、それが簡単に結果を視覚化するために作るように変更されます。

---

またはこのようなは、DOMの選択を排除するために：

var outer = $("#dps-outer"); 

outer.find("#dps-inner > img.portrait + img.portrait") 
    .each(function() { 
     var prev = $(this).prev('img.portrait'); 
     if (prev.length) { 
      prev.add(this).wrapAll("<div class='images'></div>"); 
     } else if(!$(this).next('img.portrait').length) { 
      $(this).wrap("<div class='images'></div>"); 
     } 
    }); 

outer.find("#dps-inner > img.landscape").wrap("<div class='images'></div>"); 

---

JSFIDDLE DEMO

Answer 2

高さが幅より大きいかどうかを確認してください。幅が大きい場合は、高さ=>風景ですか？あなたはちょうどそうのような高さに600を変更する必要があります。

if (width > height) { 
    jQuery(this).addClass("landscape"); 
} else { 
    jQuery(this).addClass("portrait"); 
} 

Answer 3

$.fn.isPortrait = function(){ 
    var elem = this[0]; 
    if (elem && elem.tagName.toLowerCase() == 'img') { 
     return elem.width < elem.height; 
    } 
    return; 
}; 
$.fn.isLandscape = function(){ 
    var elem = this[0]; 
    if (elem && elem.tagName.toLowerCase() == 'img') { 
     return elem.width < elem.height; 
    } 
    return; 
}; 

$.extend($.expr[':'], { 
    portrait: function(el){ 
     if (el && el.tagName.toUpperCase() == 'IMG'){ 
      return el.height > el.width; 
     } 
     return false; 
    }, 
    landscape: function(el){ 
     if (el && el.tagName.toUpperCase() == 'IMG'){ 
      return el.width > el.height; 
     } 
     return false; 
    } 
}); 

は、いくつかの追加画像の柔軟性があります。あなたは今つかむことができます。

// NOTE: For any of these to work, the image would needs to be already loaded, 
// or the height/width attributes would need to be supplied. Otherwise, this will 
// be making decisions on the absence of information. 

// returns status on FIRST image element found in collection 
$('img').isPortrait(); // returns if the image is portrait 
$('img').isLandscape(); // returns if the image is landscape 

// Filters all images found 
$('img:portrait');  // filters for only portrait images 
$('img:landscape');  // filters for only landscape images 

そこから、戻ってあなたの元の質問に行く：あなたはフィドルのURLの後に、それはフルスクリーンを開きます `show`を追加する場合

$('img:landscape').wrap('<div/>',{class:'landscapeOnly'}); 
$('#dps-inner img:portrait:nth-child(2n-1)').each(function(a){ 
    $(this).add($(this).next('p')).wrapAll('<div/>'); 
});