将jQuery TouchWipe添加到
我使用它来显示从Flickr获得的图像。它在台式机和iPad上工作得非常好。 对于iPad,我想添加滑动手势来切换图像。所以我想补充一下 下面是我如何设置Pretto的。注意回调将jQuery TouchWipe添加到,jquery,jquery-plugins,swipe,prettyphoto,Jquery,Jquery Plugins,Swipe,Prettyphoto,我使用它来显示从Flickr获得的图像。它在台式机和iPad上工作得非常好。 对于iPad,我想添加滑动手势来切换图像。所以我想补充一下 下面是我如何设置Pretto的。注意回调 function setupBox() { $("a[rel^='prettyPhoto[gallery1]']").prettyPhoto({ slideshow: 5000, social_tools: '', animation_speed:'normal'
function setupBox() {
$("a[rel^='prettyPhoto[gallery1]']").prettyPhoto({
slideshow: 5000,
social_tools: '',
animation_speed:'normal',
theme:'facebook',
changepicturecallback: function() {
setupSwipe();
}
});
}
这是回调函数fullResImg'是图像的选择器
function setupSwipe() {
$('#fullResImg').swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
if( direction == 'left' ) {
$.prettyPhoto.changePage('next');
}else if ( direction == 'right' ) {
$.prettyPhoto.changePage('previous');
}
},
allowPageScroll: "none",
});
}
所有函数都被正确调用,但未检测到刷卡。
如果我将选择器更改为“.pp_content”,我可以在框的底部滑动,但也不能在图像本身上滑动
我怀疑,这与盒子的堆叠有关,但我跨过了其他几个选择器,它们在实际图像上不起作用
我将在此处包括pP框的标记:
<div class="pp_pic_holder facebook" style="top: 90.5px; left: 80px; display: block; width: 816px;">
<div class="ppt" style="opacity: 1; display: block; width: 776px;">LN-RKI</div>
<div class="pp_top">
<div class="pp_left"></div>
<div class="pp_middle"></div>
<div class="pp_right"></div>
</div>
<div class="pp_content_container">
<div class="pp_left">
<div class="pp_right">
<div class="pp_content" style="height: 552px; width: 776px;">
<div class="pp_loaderIcon" style="display: none;"></div>
<div class="pp_fade" style="display: block;">
<a href="#" class="pp_expand" title="Expand the image" style="display: inline;">Expand</a>
<div class="pp_hoverContainer" style="height: 516px; width: 776px;">
<a class="pp_next" href="#">next</a>
<a class="pp_previous" href="#">previous</a>
</div>
<div id="pp_full_res"><img id="fullResImage" src="http://farm9.static.flickr.com/8489/8265747809_d0fca2a7c9_b.jpg" style="height: 516px; width: 776px;"></div>
<div class="pp_details" style="width: 776px;">
<div class="pp_nav" style=""><a href="#" class="pp_play">Play</a>
<a href="#" class="pp_arrow_previous">Previous</a>
<p class="currentTextHolder">1/50</p>
<a href="#" class="pp_arrow_next">Next</a>
</div>
<p class="pp_description" style="display: none;"></p>
<div class="pp_social"></div>
<a class="pp_close" href="#">Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pp_bottom">
<div class="pp_left"></div>
<div class="pp_middle"></div>
<div class="pp_right"></div>
</div>
</div>
<div class="pp_overlay" style="opacity: 0.8; height: 954px; width: 959px; display: block;"></div>
那么,这里有人知道如何使用TouchWipe在Pretto上浏览图像吗
提前谢谢 好吧,我找到了解决办法。imho不是很干净,但对这个网站来说已经足够了 我在changepicturecallback中添加了以下代码:
if( document.width <= 1024 )
{
$('.pp_hoverContainer').remove();
}
当文档宽度为时,此操作将完全删除导航覆盖。我使用上面的答案实现了相同的功能,但使用了,并发现您可以将滑动操作添加到该元素,而不是删除“.pp_hoverContainer”,如下所示:
$(document).ready(function(){
function setupBox() {
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme:'dark_rounded',
changepicturecallback: function() {
setupSwipe();
}
});
}
function setupSwipe() {
$(".pp_hoverContainer").touchwipe({
wipeLeft: function() {
$.prettyPhoto.changePage('next');
},
wipeRight: function() {
$.prettyPhoto.changePage('previous');
},
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: true
});
}
setupBox();
});
我使用了您的代码,只将fullResImg选择器更改为.pp_hoverContainer,然后滑动对我有效