3

レスポンシブ レイアウトのギャラリーを作成しています。サムネイルにはjQuery Riding Carouselsを使用しています。

ウィンドウのサイズが 1024px 未満に変更された場合、カルーセルの向きを垂直から水平に変更する必要があります ...

私は現在このようにしています：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
  });
});
</script>

... JS は単純にクラスを接続しますが、ブラウザ ウィンドウをドラッグしてサイズを変更した場合はそうしません。ページを更新する必要があります。

スクリプトを破棄してその場で再初期化する方法はありますか?

4

4 に答える 4

4

動作例を確認してください: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize すべてのブラウザーでテストされ、完全に正常に動作します。報奨金は私のものです:) 例では、しきい値幅350を指定しました。結果ペインのサイズを変更してテストできます。水平スクロールバーを開始するとすぐに、垂直に変換されます。

要件に応じて考えられる 1 つの問題は、画像にハンドラーがある場合、表示方法を変更した後にそれらがなくなることです。それに対する解決策は、#mycarousel を div でラップし、Jquery デリゲートを使用してラッパーでイベントを処理することで、イベントの問題もありません。このような状況に陥った場合はお知らせください。

次のコードは、まさにあなたの必要に応じたものです。

ウィンドウのサイズが 1024px 未満に変更された場合、カルーセルの向きを垂直から水平に変更する必要があります。

これは例とは逆です。私にとっては、幅を小さくして垂直にする方が理にかなっています。

jQuery(document).ready(function() {
    var widthCheck = 1008;
    var resizeTimer = null,
        verticalFlg = $(window).width() > widthCheck;
    var obj = jQuery('#mycarousel').clone();
    $('#mycarousel').jcarousel({
        vertical: verticalFlg,
        scroll: 2
    });
    jQuery(window).resize(function() {
        resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
        resizeTimer = setTimeout(function() {
            var flg = ($(window).width() > widthCheck);
            if (verticalFlg != flg) {
                verticalFlg = flg;
                $('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
                $('#mycarousel').jcarousel({
                    vertical: verticalFlg,
                    scroll: 2
                });
            }
        }, 200);
    });
})
于 2012-07-06T22:50:42.903 に答える
1

または、ソースを参照することもできます。バージョン0.2を使用していると思います

ソース https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js を見ると、オブジェクトの初期化でのみ行われる 2 行 (80 と 81) があることがわかります。それらの行は

this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';

149のこの行も

if (!this.options.vertical && this.options.rtl) {
  this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}

それらをコールバックに追加すると、より良い結果が得られる可能性があります。

プラグインのバージョン 0.3 を試すこともできます。

以前の回答:

今は自分でテストすることはできませんが、これを試してください：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel({
    vertical: $(window).width() > 1008,
    scroll: 3,
    reloadCallback: function () {
        this.options.vertical = $(window).width() > 1008;
    },
  });
});
</script>
于 2012-07-05T13:29:10.390 に答える
0

次のコードはテストしていませんが、次のコードが機能するはずです。

<script type="text/javascript">
    var carousel;
    jQuery(window).resize(function() {
        if(carousel !== undefined) carousel.destroy();
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
</script>

または次の線に沿ってさらに良いもの：

<script type="text/javascript">
    var carousel;
    jQuery(document).ready(function() {
        carousel = jQuery('#mycarousel').jcarousel({
            vertical: $(window).width() > 1008,
            scroll: 3,
        });
    });
    jQuery(window).resize(function() {
        //NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
        carousel.options.vertical = $(window).width() > 1008;
        carousel.vertical = $(window).width() > 1008;
        carousel.reload();
    });
</script>

そうでない場合はconsole.log(carousel)、コードにaを追加し、出力された値のプロトタイプを確認する必要があります（F12を確認してください）。破壊の線に沿って何かがあるはずです（または代わりにチェックしてくださいconsole.log($.jcarousel())）。

于 2012-07-05T20:31:01.690 に答える
0 
<script type="text/javascript">
    jQuery(document).ready(function() {
      var sizeCheck = function() {
        return $(window).outerWidth() >= 1024
      }
      jQuery('#mycarousel').jcarousel({
        vertical: sizeCheck(),
        scroll: 3,
      });
      var jCarousel = jQuery('#mycarousel').data('jcarousel');
      window.onresize = function() {
        jCarousel.options.vertical = sizeCheck(); // maybe you have to access the option through jCarousel.plugin.options.vertical
        jCarousel.reset();
      }
    });
    </script>

多分これはうまくいきます。

于 2012-06-28T10:05:53.697 に答える