金曜, 8月 17, 2018

Ad Gallery ~Google Chromeでのサムネイルリスト表示

JQueryライブラリーを利用した 「Ad Gallery

Facebookページに組み込むと動きのあるページにできるのでいくつかテンプレを試しているのですが、Google Chrome (16.0.912.77 m)でサムネイルリストの表示がおかしくなってしまいます。

スライドショーを何度か繰り返しているうちに、サムネイル・リストが突然改行してしまい、正しく横に並んでくれません。

 

こちらは正常

2012-02-02_12h06_21

こちらが異常

2012-02-02_12h05_18

正常ではサムネイルは横に5つ並ぶはずが、何度か繰り返し表示させているうちに、3件目以降のサムネイルが改行されて下に落ちてしまいます。

これはいまのところ、Google Chromeだけで起きており、FireFox3やIE8ではこのようなことはないので、Chrome特有の問題(バグ?)のようです。

 

上の画像はChromeの右クリックにある「要素を検証」でサムネイルリスト部分を表示させてみたものですが、異常の方では、ad.thumb.listの表示幅が202pxと小さくなってしまっており、これではリストが途中で改行されてしまうのは当然。

スライドショーを表示中に、動的に表示幅が変化していることから、原因はCSSファイルではなくて、Javascriptの方にあると思われるので、さっそく調べてみることに。

Javascriptについての知識はほとんどないのですが、それらしきところ(338行目、342行目)を見つけ適当に書き換えてみたのですが、今度はChromeではうまくいってもFireFox,IEで正常に表示されない。

 

最終的に、285行目から287行目までの3行をコメント化することで、ようやくChrome,FireFox,IE8でなんとか正常に表示されるようになりましたが、抜本的な解決ではありません。

※同じような症状に困ってある方もおられるかと思い、備忘録を兼ねて書き留めておきます。

 

{codecitation class="brush:html"}

// } else{

// thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth;

// thumbs_loaded++;

 {/codecitation}

 

この記事をソーシャルネットワークにシェア またはEverNoteにクリップできます

Submit to FacebookSubmit to TwitterSubmit to LinkedInこのエントリーをはてなブックマークに追加 Clip to Evernote
Share
先頭へ戻る