“猫头鹰轮播”和“颜色盒”幻灯片操作问题
“owl carousel” and “colorbox” slide action issue
我需要有关colorbox和owlcarrousel幻灯片问题的帮助
我多次将"colorbox"模块窗口中的图片滑动。完成此操作并关闭模块窗口后,如果我尝试检查图片,我可以看到它变得不同,并且只显示一半的图片。为了更容易理解,我在YouTube上上传了一部关于这个问题的电影。
优酷 : https://youtu.be/uCOkgeoPSh8
店铺 : http://www.ks-clothing.click/men/tees-knits-and-polos/lexington-cardigan-sweater-479.html
另外,我按照下面链接中的建议,我在脚本中输入了"取消绑定",但它没有移动。我该如何解决这个问题?
堆栈溢出:颜色框和防止默认不能一起工作?
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div id="sync1" class="owl-carousel">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<div class="item">
<a class="gallery" href="<?php echo $this->getGalleryImageUrl($_image); ?>">Colorbox</a>
<!-- <a class="cloud-zoom" rel="position: 'inside' , showTitle: false" href="--><?php //echo $this->getGalleryImageUrl($_image); ?><!--">-->
<img src="<?php echo $this->getGalleryImageUrl($_image); ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>" title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />
<!-- </a>-->
</div>
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div id="sync2" class="owl-carousel">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<div class="item">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</div>
<?php endif; ?>
<?php $i++; endforeach; ?>
</div>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
jQuery(function ($) {
$("a.gallery").unbind('click').colorbox({
rel:'slideshow',
transition:'none',
maxWidth:'100%',
maxHeight:"100%",
opacity: 0.5
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
var sync1 = jQuery("#sync1");
var sync2 = jQuery("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 15,
itemsDesktop : [1199,10],
itemsDesktopSmall : [979,10],
itemsTablet : [768,8],
itemsMobile : [479,4],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
jQuery("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if(jQuery("#sync2").data("owlCarousel") !== undefined){
center(current)
}
}
jQuery("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = jQuery(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
});
//]]>
</script>
您需要
将returnFocus: false
添加到颜色框选项中,如下所示:
$("a.gallery").unbind('click').colorbox({
rel:'slideshow',
transition:'none',
maxWidth:'100%',
maxHeight:"100%",
opacity: 0.5,
returnFocus: false
});
焦点返回不知何故混淆了猫头鹰滑块,这确实出乎意料。
相关文章:
- JS幻灯片与CSS背景颜色变化
- 带有数字的 Jquery 幻灯片 - 帮助让数字链接保持颜色,直到选择另一个链接
- 在“颜色盒”处于打开状态时,动态地从“颜色框”中删除图像
- 与图像幻灯片放映相对应的文本颜色变化
- 使用颜色盒(JQuery灯箱插件),如何单击图像以关闭灯箱
- 颜色盒和表单样式之间的冲突
- 花式盒内容颜色
- 如何从颜色盒获得返回值
- 位于另一个元素顶部的颜色盒定位
- 元素,在颜色盒中添加一个动作
- 控制iframe内颜色盒的位置
- 显示/隐藏侧边栏菜单和扩展颜色大小与幻灯片效果
- 我如何同时切换背景颜色和切换幻灯片?
- 在幻灯片更改时更改主体颜色
- 颜色盒模式没有调整大小
- 调整颜色盒大小不工作
- 离子幻灯片盒 - 如何在离子幻灯片中滑动全宽iframe视频
- “猫头鹰轮播”和“颜色盒”幻灯片操作问题
- 打开和关闭颜色盒的间隔与延迟
- 悬停颜色过渡幻灯片效果