0

div の左半分に画像が表示され、右半分に灰色の背景のキャプションが表示された画像スライダーがあります。UI に Bootstrap を使用しているため、未亡人が変化すると画像のサイズが変化するため、キャプションのサイズを正しく保つために jQuery を使用しています。これは localhost では正常に機能しますが、私のステージング環境では機能しません。

jQuery:

jQuery(document).ready(function($) {
 //resizes carousel right side as window changes
 function size_carousel(){
    var height = $('.carousel-inner .item img:visible').height();
    console.log($('.carousel-inner .item img:visible').height());
    $('.carousel-caption').each(function(){
        $(this).height(height);
    });
 }
 $(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){
    size_carousel();
 });
});

HTML の抜粋:

<div id="myCarousel" class="carousel slide">
         <ol class="carousel-indicators">
                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                 <li data-target="#myCarousel" data-slide-to="1"></li>
                 <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
        <div class="carousel-inner">
          <div class="item active">
                <img src="<?php bloginfo('template_directory');?>/images/test/demo1.jpeg" class="span6"/>
                <div class="carousel-caption span6">
                        <h3 class="cat">Tech News</h3>
                        <h2 class="title">Article Title</h2>
                        <p class="dek well well-small">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.  Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div> <!-- /caption -->
          </div><!-- /item -->
    </div>

更新時にlocalhost、コンソールに正しい値が表示されます (ウィンドウ サイズに応じて、b/w 2 ～ 300 で変化します) が、ステージング環境30はウィンドウ サイズに関係なく常に返されます。ウィンドウのサイズを変更すると、正しい値が返され、キャプションが正しく調整されるため、唯一の問題は最初のページの読み込みにあります。

localhostはMAMPで、ステージングは​​MediaTemple gsサーバーであり、WordPressのインストールとjQueryのバージョンが同じであるため、動作が異なる原因を特定するのに苦労しています。

ここで実際の動作を見ることができます。

4

1 に答える 1

0

これを変える：

$(window).resize(function() {
    size_carousel();
 });
 $('#myCarousel').ready(function(){  //ready event is only for document!
    size_carousel();
 });

それに：

$(window).on('resize load',function() {
    size_carousel();
 });
于 2013-06-21T12:33:44.357 に答える