javascript 在窗口调整大小以将方向从垂直更改为水平时重新加载 jQuery Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11241621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reload jQuery Carousel on window resize to change orientation from vertical to horisontal
提问by Jayx
I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carouselsfor the thumbnails.
我正在为响应式布局创建一个画廊 - 我正在使用jQuery Riding Carousels作为缩略图。
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...
当窗口重新调整大小到小于 1024px 时，轮播的方向需要从垂直变为水平......
I'm doing it like this at present:
我目前是这样做的：
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.
... JS 只是简单地连接了一个类，但是如果您通过拖动它来重新调整浏览器窗口的大小，它就不会这样做 - 您需要刷新页面。
Is there a way to destroy the script and re-initialize it on the fly?
有没有办法销毁脚本并动态重新初始化它？
回答by gaurang171
Please check Working exmpale: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resizeTested in all browsers and works perfectly fine. bounty is mine :) In the example i have give threshold widht 350 you can test it by resizing the result pane and as soon as you start havin horizontal scroll bar it will converted to vertical.
请检查工作示例：http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize 在所有浏览器中测试并且工作得很好。赏金是我的 :) 在示例中，我给出了 350 的阈值，您可以通过调整结果窗格的大小来测试它，一旦您开始使用水平滚动条，它就会转换为垂直。
1 possible issue depending on your requirement is if you ahve any handlers on images they will be gone after changing display way. the solution for it is wrap your #mycarousel in a div and use Jquery delegate to handle events on the wrapper so no issue with events also. Let me know if you come under this situation.
根据您的要求，1 个可能的问题是，如果您对图像有任何处理程序，它们将在更改显示方式后消失。它的解决方案是将 #mycarousel 包装在一个 div 中，并使用 Jquery 委托来处理包装器上的事件，因此事件也没有问题。如果您遇到这种情况，请告诉我。
Following code is exactly as per your need.
以下代码完全符合您的需要。
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal .
当窗口被重新调整到小于 1024px 时，carousel 的方向需要从垂直变为水平。
which is revers form the example as for me it makes more sense if width is less make it vertical.
这与示例相反，对我来说，如果宽度更小使其垂直更有意义。
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);
});
})
回答by Hogan
Or you can look at the source. I'm guessing you are using version 0.2
或者你可以看看源码。我猜你使用的是 0.2 版
Looking at the source https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.jswe can see that there are two lines (80 and 81) which are only done in object init. Those lines are
查看源代码 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';
also this line at 149
还有这条线在 149
if (!this.options.vertical && this.options.rtl) {
this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}
It might be if you add those to the callback you will get better results.
如果您将这些添加到回调中，您可能会获得更好的结果。
You could also try version 0.3 of the plugin.
您也可以尝试插件的 0.3 版。
Prior answer:
之前的回答：
Can't test it myself right now, but try this:
现在不能自己测试，但试试这个：
<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>
回答by David Mulder
I haven't tested the following code, but I am fairly sure the following code should work:
我还没有测试过以下代码，但我很确定以下代码应该可以工作：
<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>
or even better something along the lines of:
甚至更好的东西是：
<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>
If it does not, you should add a console.log(carousel)to your code and check out what the prototype is of the outputted value (check F12). There should be something along the lines of destroy (or alternatively check console.log($.jcarousel())).
如果没有，您应该console.log(carousel)在代码中添加 a并检查输出值的原型是什么（检查 F12）。应该有一些类似于 destroy ( 或者 check console.log($.jcarousel())) 的东西。
回答by Simon
<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>
Maybe this works.
也许这有效。
