jquery 모바일을 사용하여 웹 사이트를 만들고 거의 모든 것이 잘 작동합니다. 하지만 약간의 문제가 있으며 Photoswipe (http://www.photoswipe.com/)와 관련이 있습니다.jQuery Mobile + Photoswipe, 아약스가있는 갤러리로드 중?
이 발생하는 것입니다 :
나는 카테고리로 나누어 여러 가지 casepages 있습니다. 내가 caseite에 들어갈 때 내가 갤러리를 클릭 할 수있을 때, 이미지는 나타나고 잘 작동한다. 그러나이 케이스 페이지에서 직접 다른 케이스 페이지로 이동하여 해당 갤러리를 열려고 시도합니다. 아무 반응이 없습니다. 그러나 내가 직접 다른 casepage로 가서 (갤러리가없는) 페이지를 방문한 다음 새 사례로 이동하십시오. 갤러리가 열립니다. jquery 모바일 표준 아약스 처리를 사용하므로 모든 페이지에 아약스가로드되고 다른 하나는 <head>
과 다르지 않습니다.
갤러리 이미지는 PHP와 MySQL로로드되지만 <ul>
의 ID는 항상 같습니다. #갱도.
동일한 ID를 가진 갤러리가있는 페이지간에 직접 이동할 때 이와 관련이있을 수 있습니까? 뭔가 엉망이 되니?
자바 스크립트 :
(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));
$('div:jqmData(role="page")').live('pageinit',function(){
var options = {
jQueryMobile: true
};
$("#Gallery a").photoSwipe(options);
});
HTML
<ul id="Gallery" class="gallery">
<li><a href="01.jpg" rel="external"><img src="01.jpg" alt="1" /></a></li>
<li><a href="02.jpg" rel="external"><img src="02.jpg" alt="2" /></a></li>
</ul>
나는 동일한 문제로 고통 받고있다. 표준 jquery 호출을 사용하면 스 와이프가로드 될 수 있지만 페이지를 확대/축소하면 검정색이됩니다. 그렇지 않으면 링크를 "스 와이프 가능"으로 등록 할 수 없습니다. –
글쎄 실제로 문제는 내가 #IDs intsead ofClasses를 사용한다는 것입니다. 그래서 그것을 수업으로 바꾸면 효과가 있습니다. – Paparappa