作業中のスライドショー モジュールがあり、元の画像 (読み込み後に CSS でレンダリングされたボックス モデルではない) の幅/高さを取得して、それを含めるために必要な div の幅/高さを計算したいと考えています。周囲の div の幅/高さは、ビューポートのサイズに応じて拡大/縮小するように設定されています。
すべてを取得するために正常に動作する私の HTML 構造は次のとおりです。
<div id="listing_detail_photo_slider">
<div id="listing_detail_photo_slider_strip"><div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/001.jpg&h=1440" alt="001 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/002.jpg&h=1440" alt="002 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/003.jpg&h=1440" alt="003 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/004.jpg&h=1440" alt="004 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/005.jpg&h=1440" alt="005 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/006.jpg&h=1440" alt="006 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/007.jpg&h=1440" alt="007 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/008.jpg&h=1440" alt="008 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/009.jpg&h=1440" alt="009 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/010.jpg&h=1440" alt="010 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/011.jpg&h=1440" alt="011 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/012.jpg&h=1440" alt="012 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/013.jpg&h=1440" alt="013 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/014.jpg&h=1440" alt="014 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/015.jpg&h=1440" alt="015 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/016.jpg&h=1440" alt="016 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/017.jpg&h=1440" alt="017 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/018.jpg&h=1440" alt="018 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/019.jpg&h=1440" alt="019 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/020.jpg&h=1440" alt="020 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/021.jpg&h=1440" alt="021 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/022.jpg&h=1440" alt="022 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/023.jpg&h=1440" alt="023 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/024.jpg&h=1440" alt="024 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/025.jpg&h=1440" alt="025 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/026.jpg&h=1440" alt="026 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/027.jpg&h=1440" alt="027 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/028.jpg&h=1440" alt="028 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/029.jpg&h=1440" alt="029 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/030.jpg&h=1440" alt="030 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/031.jpg&h=1440" alt="031 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/032.jpg&h=1440" alt="032 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/033.jpg&h=1440" alt="033 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/034.jpg&h=1440" alt="034 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/035.jpg&h=1440" alt="035 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
<div class="listing_gallery_thumbnail">
<img src="http://www.djdenner.ca/timthumb.php?src=http://www.djdenner.ca/homes/1/036.jpg&h=1440" alt="036 at 4112 Burkehill Road, Bayridge, West Vancouver" class="scale-with-grid" />
</div>
</div>
そして、これが最新バージョンのjQueryで実行されている私のjavascriptコードです:
function showlisting_window_resize() {
// deduct the height of the top bar from the total height of the viewport to get slideshow width.
// we want bottom to hit the bottom of screen on first view, until users scroll..
var slideshowh = window.windowh-$('#header_container').height();
$('#listing_detail_photo_slider').height(slideshowh);
$('#listing_detail_photo_slider_strip').height(slideshowh);
var slideshoww = 0; // start at 0, add up all the widths with gaps.
$('#listing_detail_photo_slider_strip div').each(function(){
slideshoww = slideshoww + $(this).width()+5;
var img = $(this).find('img');
var pic_real = new Array();
$("<img/>").attr("src", $(img[0]).attr("src")).load(
function() {
pic_real[0] = this.width; // Note: $(this).width() will not
pic_real[1] = this.height; // work for in memory images.
}
);
console.log($(img[0]).attr("src")+' dimensions: '+pic_real[0]+' by '+pic_real[1]);
});
$('#listing_detail_photo_slider_strip').width(slideshoww).delay(500).css('top', '0px');
// now position the prev/next slides
// width:68px, height: 300px.
var prevnexttop = (slideshowh-300)/2; // middle align the prev/next buttons vertically.
$('#photo_slider_previous, #photo_slider_next').css('top',prevnexttop);
activate_carousel();
}
console.log は次を返します。
http://www.mydomain.ca/path/to/image.jpg dimensions: undefined by undefined
しかし、load() の下の function(){} 部分の WITHIN に console.log 行を置くと、機能します。
つまり、返された変数 pic をどのように使用するのですか