目標上的圖片滑動不適用於jQuery Mobile
[英]Photo Swipe with target not working on jQuery Mobile
問題描述
我在jQuery Mobile頁面中使用Photo Swipe（ http://www.photoswipe.com/ ）。 我想顯示加載圖像的縮略圖。 單擊縮略圖時，將用戶帶到已啟用滑動的圖庫，該圖庫占屏幕高度的30％。 我想在其中顯示其他一些內容。 我正在使用3.0.5版的 PhotoSwipe，並嘗試指定TARGET 。 但是沒有回應。 以下是js文件，使用的代碼
<head>
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"><script>
<script>
$(document).ready(function(){
var myPhotoSwipe = $("#Gallery a").photoSwipe({
enableMouseWheel: false ,
enableKeyboard: false
});
});
</script>
</head>
<body>
<div data-role = "page" data-add-back-btn = "true" id = "mainGallery">
<div data-role = "header" data-theme = "a">
<h1>Gallery</h1>
</div>
<div data-role = "content" data-theme = "c">
<p>Hi... I am the Photo Gallery</p>
<div class = "gallery-wrap">
<ul class = "gallery" id="Gallery" data-role = "listview" data-inset = "true">
<li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
<li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
</ul>
</div>
</div>
<div data-role="footer" data-theme = "c" data-position="fixed">
<h4>© 2013</h4>
</div>
</div>
</body>
我對jQuery Mobile非常陌生。 誰能幫我這個
謝謝
3 個解決方案
解決方案1
0 2013-07-04 07:01:32
用這個
(function(window, $, PhotoSwipe){
$(document).ready(function(){
$('div.gallery-page')
.live('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.live('pagehide', function(e){
var
currentPage = $(e.target),
photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
PhotoSwipe.detatch(photoSwipeInstance);
}
return true;
});
});
}(window, window.jQuery, window.Code.PhotoSwipe));
解決方案2
0 2013-07-04 10:48:36
希望這將有助於使用圖庫div下面的腳本
<div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">
<div data-role = "header" data-theme = "a">
<h1>Gallery</h1>
</div>
<div data-role = "content" data-theme = "c">
<p>Hi... I am the Photo Gallery</p>
<div class = "gallery-wrap">
<ul class="gallery"data-role = "listview" data-inset = "true">
<li><a href="full/001.jpg" rel="external"><img src="full/001.jpg" alt="Image 010" /></a></li>
<li><a href="full/001.jpg" rel="external"><img src="/full/001.jpg" alt="Image 010" /></a></li>
</ul>
</div>
</div>
<div data-role="footer" data-theme = "c" data-position="fixed">
<h4>© 2013</h4>
</div>
<script>
$('div.gallery-page') .live('pageshow', function(e){
var currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a",
e.target).photoSwipe(options,currentPage.attr('id'));
return true;
})
</script>
</div>
解決方案3
0 2013-10-30 16:27:55
$('div.gallery-page').on('pagehide', function(e){
PhotoSwipe.unsetActivateInstance(instance);
PhotoSwipe.detatch(instance);
return true;
})
;
Android 4.2.2中的Jquery Mobile滑動事件無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.