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 我们可以看到有两行（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">
    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 回答
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）。应该有一些类似于destroy（或check console.log($.jcarousel())）的东西。

于 2012-07-05T20:31:01.690 回答