I'm trying to setup PhotoSwipe (http://www.photoswipe.com/) which is a photo gallery jquery plugin which is compatible with mobile devices. But I'm having trouble implementing the plugin! I've gone through each line I was supposed to add but the plugin's not functioning at all. The images link fine obviously, but the plugin doesn't work the way that it should. I think missing something but I don't know what.
I'm relatively new to jQuery and I honestly don't know how anything works, I only know how to plug things in.
I've checked the file paths and everything seems to be pointed to the right place.
Here's my code.
in 'head' tag
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$("#gallery a").photoSwipe(options);
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
in 'body' tag
<ul id="gallery">
<li><a href="img/events/01.jpg"><img src="img/events/01t.jpg" rel="external" alt="" /></a></li>
<li><a href="img/events/02.jpg"><img src="img/events/02t.jpg" rel="external" alt="" /></a></li>
<li><a href="img/events/03.jpg"><img src="img/events/03t.jpg" rel="external" alt="" /></a></li>
<li><a href="img/events/04.jpg"><img src="img/events/04t.jpg" rel="external" alt="" /></a></li>
<li><a href="img/events/05.jpg"><img src="img/events/05t.jpg" rel="external" alt="" /></a></li>
</ul>
Oh. Actually the link to jQuery needs to come before the link to photoswipe.
So your script files should show like this:
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.4.min.js"></script>