在调整窗口大小时重新加载 jQuery 轮播以将方向从垂直更改为垂直
Reload jQuery Carousel on window resize to change orientation from vertical to horisontal
我正在为响应式布局创建一个画廊 - 我正在使用jQuery骑行轮播作为缩略图。
当窗口大小调整为小于 1024 像素时,轮播的方向需要从垂直更改为水平......
我目前是这样做的:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
。JS只是挂接一个类,但是如果您通过拖动浏览器窗口来调整浏览器窗口的大小,它就不会这样做 - 您需要刷新页面。
有没有办法销毁脚本并即时重新初始化它?
请检查工作示例:http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize在所有浏览器中都经过测试,工作正常。赏金是我的:)在我给出阈值 widht 350 的示例中,您可以通过调整结果窗格的大小来测试它,一旦您开始水平滚动条,它就会转换为垂直。
根据您的要求,1 个可能的问题是,如果您在图像上有任何处理程序,它们将在更改显示方式后消失。 它的解决方案是将您的 #mycarousel 包装在div 中,并使用 Jquery 委托来处理包装器上的事件,这样事件也没有问题。如果您遇到这种情况,请告诉我。
以下代码完全符合您的需要。
当窗口大小调整为小于 1024 像素时,轮播界面的方向需要从垂直更改为水平。
对我来说,这是示例的 revers 如果宽度较小使其垂直更有意义。
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);
});
})
你可以看看源代码。 我猜你使用的是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>
<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>
也许这有效。
我还没有测试过以下代码,但我相当确定以下代码应该有效:
<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)
,并检查输出值的原型是什么(检查 F12)。应该有一些类似于破坏的东西(或者检查console.log($.jcarousel())
)。
- ng映射方向备选方案
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 跟踪jqplot垂直折线图的鼠标位置
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 我怎样才能知道用户滑动的方向
- 如何设置自定义垂直滑块Jquery的动画
- 在调整窗口大小时重新加载 jQuery 轮播以将方向从垂直更改为垂直
- 如何使用 JQuery 移动更改移动方向时使网格元素水平对齐到垂直对齐
- 在移动屏幕中从纵向移动到横向并返回纵向时,窗口元素在垂直方向上变得不可见
- 垂直树结构方向
- HTML、CSS、JQuery网页正文在垂直方向上拉伸过大
- 如何在相反的方向上垂直移动两个列表
- 基于垂直方向绑定多个纹理
- THRE.JS使面法线垂直于面和外部方向
- 如何嵌套场景和导航方向='垂直'在React Native Router Flux中
- 在D3中将堆叠条形图的方向从垂直改为水平
- Freez“x %”;网页的垂直方向
- & # 39; touchmove& # 39;事件查看在垂直方向上拖动了多少像素
- 滑动器(高度问题-多个滑动器-垂直方向)