I'm creating a website using jquery mobile and almost everything works great. But i have slight problem and it has something to do with Photoswipe (http://www.photoswipe.com/).
This is what happens:
I have several different casepages divided up in categories. When i enter a casesite i can click up the gallery, the images show up and works great. However if I go from this casepage, directly to another casepage and try to open that gallery. Nothing happens. But if i dont go directly to another casepage and go ta page between (wich has no gallery) and then to a new case. The gallery will open up. I use jquery mobile standard ajax handling so every page is loaded with ajax and is no different then the other in the <head>.
The gallery images is loaded with PHP and MySQL but the id for the <ul> is always the same; #Gallery.
Could it have something to do with this, that when going directly between pages where there are galleries with the same id. It messes something up? This is my code:
Javascript:
(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>
