1

bxsliderでブートストラップ モーダル ボックスを使用しています。bxslider の内容を ajax で変更しています。

これが私のhtmlコードです。

<div id="storeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <ul class="contact_bxslider">

    </ul>
</div>

そしてjqueryコードは

$(document).ready(function(){
    var slider = $('.contact_bxslider').bxSlider({
                  auto:true
                });

    $('.store_pictures_click').click(function(e){
        e.preventDefault();

        var store_name  =   $(this).attr('id');

        $.post('<?php echo site_url('cart/change_store_pictures'); ?>',{store_name:store_name},
            function(data){
                $('.contact_bxslider').html(data);
                slider.reloadSlider();
                $('#storeModal').modal('show');
            }
        );

    });


});

アヤックスコード...

function change_store_pictures(){

        $store_name =   $this->input->post('store_name');
        $this->load->model('Store_Pictures_model'); 
        $data['store_pictures'] =   $this->Store_Pictures_model->get_store_pictures($store_name);

        foreach($data['store_pictures'] as $store_picture){
            ?>
            <li><img src="<?php echo base_url('uploads/images/full/'.$store_picture->store_picture); ?>" alt="<?php echo $store_picture->store_name; ?>" /></li>
        <?php
        }
    }

解決策が得られない人を助けてください.Googleで検索したところ、use width:960px;という1つの結果が得られました。私は同じことをしましたが、うまくいきませんでした。

手伝って頂けますか。

4

4 に答える 4

1

ドキュメントのロード時に最初にモデル ボックスを表示し、次に次のようにスライダーをリロードします。

$('#storeModal').modal('show');

setTimeout(function(){
    slider.reloadSlider();
},200);
于 2015-09-01T07:38:28.877 に答える
0

100% 確実というわけではありませんが、Bxslider を (再) ロードするときに、位置とサイズについて大量の計算を行うと思います。モーダル ダイアログが表示されないことが原因で問題が発生している可能性があります。

最初にモデルボックスを表示してから、次のようにスライダーをリロードしてみましたか:

$('#storeModal').modal('show');
slider.reloadSlider();
于 2013-11-04T23:53:22.040 に答える
0

bxSlider は、リロード時に信じられないほど不安定であることがわかりました。おそらく、Robba から報告されたように計算を行うためです。したがって、ロバの論理に基づいて構築し、私の経験を追加します。

slider.destroySlider();
$('#storeModal').modal('show');
slider.reloadSlider();

で問題が発生するたびにreloadSlider()、最初に で破壊することになりdestroySlider()ます。

于 2015-09-01T07:52:04.603 に答える