I try to work with photoswipe (downloaded here: http://github.com/downloads/dimsemenov/PhotoSwipe/code-photoswipe.v1.0.11.zip) on my mobile site. My problem is, that appearently the photoswipe doesn't fire.
My header is the following:
<link media="all" href="fileadmin/css/mobile/photoswipe.css?1406785972" type="text/css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.9.1.min.js">
<script src="fileadmin/js/libaries/simple-inheritance.min.js">
<script src="fileadmin/js/libaries/code-photoswipe-1.0.11.min.js">
<script src="fileadmin/js/libaries/photoswipe.js">
When I click on a picture, photoswipe doesn't start. I think you can see that best on my site itself: http://m.andre-hohmann.net/bilder/urlaubsbilder/tunesien-2010/. Does anybody know what I'm doing wrong?
Thank you very much.
According to the documentation, you need to attach the Photoswipe's library when DOMContentLoaded is, well, loaded, like this:
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
}, false);
Note the window.document.querySelectorAll('#Gallery a') because that means that there's a DOM element with ID Gallery that has one or more a elements inside. All those a elements has then the Photoswipe library attached.