ウィンドウズサイズを変えたときだけ正しく表示される要素を通常時に正しく表示したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Wordpressベースのサイトですが、
ACFプラグインとLightbox, JQuery sliderを組み合わせたスライドショーを作っています。
ページが表示されたときに画像が正しく表示されません。

ウィンドウサイズを手動で変えると正しく表示されます。リロードでは正しく表示されません。

下記該当html↓

 <section class="sectionGallery">       
  <div class="row">
                            <div class="detailGallery col-md-12">
			<ul class="light-slider" id="image-gallery">
                     <li data-thumb="01-2.jpg">
                <a href="01-2.jpg" data-rel="lightbox">
                     <img src="01-2.jpg" alt="" />
                </a>
 <span></span>
            </li>
                     <li data-thumb="02-2.jpg">
                <a href="02-2.jpg" data-rel="lightbox">
                     <img src="02-2.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="03-2.jpg">
                <a href="03-2.jpg" data-rel="lightbox">
                     <img src="03-2.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="04-2.jpg">
                <a href="04-2.jpg" data-rel="lightbox">
                     <img src="04-2.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="05-2.jpg">
                <a href="05-2.jpg" data-rel="lightbox">
                     <img src="05-2.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="06-2.jpg">
                <a href="06-2.jpg" data-rel="lightbox">
                     <img src="06-2.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="07.jpg">
                <a href="07.jpg" data-rel="lightbox">
                     <img src="07.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="08.jpg">
                <a href="08.jpg" data-rel="lightbox">
                     <img src="08.jpg" alt="" />
                </a>
                <span></span>
            </li>
                     <li data-thumb="09.jpg">
                <a href="09.jpg" data-rel="lightbox">
                     <img src="09.jpg" alt="" />
                </a>
                <span></span>
            </li>
            </ul>
                                  </div><!-- eof "detailGallery" -->
                         </div><!-- eof row -->
                                 </section><!-- eof "sectionGallery" -->

該当css↓

.detailGallery {
   width: 100%;
}

#image-gallery {
      width: 100%;
}

#image-gallery li {
  position: relative;
  width: 100%;
}

#image-gallery li:before {
  content: "";
  display: block;
  padding-top: calc(3 / 4 * 100%); /*4:3で固定*/
}
#image-gallery li a  {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#image-gallery li a img {
width: 100% !important;
}

もしどなたか原因を解決策がお分かりになればアドバイスをお願いいたします！

Comments

[yambejp]

ちゃんとマークダウンしないと先頭の#は、見出しになります

[playbyear]

ご指摘ありがとうございます。初投稿だったため、よくわかっておりませんでした。ありがとうございます。

Answer 1

プラグインについての知識がないので、暫定対応のヒント、という程度に捉えてください。

ウィンドウサイズを手動で変えた際に、プラグインのJavaScriptが動的に、widthなどを設定しているのだと思います。それが、ウィンドウサイズを変更するまではまだ適応されていないので崩れてしまっているのだと思います。

[1] 泥臭い方法
ブラウザの検証ツールで、.sectionGallery、.detailGallery、.light-sliderなどの要素を1つずつチェックし、style=""を確認してください。

• 開いた直後の状態
• ウィンドウサイズを変えたあとの状態

上記を確認し、ウィンドウサイズを変えたあとに追加されるstyle=""の値、
特にwidthについてあらかじめHTML側にベタ書きするか、CSSに書くか、してください。

[2] JavaScript的な解決方法
プラグインの内部を確認し「ウィンドウ幅が変更されたとき」に実行される記述のなかから、
CSS (特にwidthに関しての) 記述を見つけ、画像読み込み後にその記述を実行するようにする、など実装してみてください。

Comments

[playbyear]

回答ありがとうございます。試してみてまたご報告させていただきます。

[playbyear]

HTMLをみたところ確かに下記のように勝手にwidthが加えられていました。

[html ページがロードされた時（NG）]
<ul class="light-slider lightSlider lSSlide" id="image-gallery" style="width: 90px; height: 0px; padding-bottom: 0%; transform: translate3d(0px, 0px, 0px);">

[html ウィンドウサイズを手動で変えた時（OK）]
<ul class="light-slider lightSlider lSSlide" id="image-gallery" style="width: 4140px; height: 338px; padding-bottom: 0%; transform: translate3d(0px, 0px, 0px);">

この部分を集中的に検証してみます。

Answer 2

結局、コードのエラーではなく、javascriptの競合問題だったようです。
該当.jsファイルをヘッダーではなくフッターに記載したことで解決いたしました。