Search code examples
javascriptjqueryhtmlmobilephotoswipe

Trying to implement PhotoSwipe on mobile website, but


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>

Solution

  • 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>