3

please show me an example of the featherlight using the touch libraries to enable swiping (navigating images).

according to the website https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices there are three libraries supported to enable touch:

  • jQuery Mobile
  • jQuery detectSwipe
  • jQuery Mobile events

Seeking an example showing how to use any of these with featherlight.

  • i dont need another library, since it is the one already in use.
Hussain
  • 947
  • 5
  • 15

2 Answers2

3

after some searching and trying to find an example, I found the answer.

The documentation of the featherlight.js is not that clear, but it is simply the answer. Just include the swipe_detec.js before including featherlight.js and it will enable touch swiping on mobile devices.

example

    <html>
    <head>
    <!-- jquery -->
     <script src="//code.jquery.com/jquery-latest.js"></script>

    <!-- featherlight -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
        <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" />
        <script src="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- featherlight gallery -->

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.js" type="text/javascript"></script>
</head>

    <body>  
<a class="thumbnail gallery" href="a.jpg" > <img src="a.jpg" /> </a>
<a class="thumbnail gallery" href="b.jpg" > <img src="b.jpg" /> </a>
<a class="thumbnail gallery" href="c.jpg" > <img src="c.jpg" /> </a>

    <script>
    $(document).ready(function(){
        $('.gallery').featherlightGallery();
    });
    </script>
    </body>
    </html>

hope someone finds it useful.

Hussain
  • 947
  • 5
  • 15
1

thanks @Hussain, that works, just one slight oddity is the page underneath the lightbox is also responding to the drag. The example could do with updating to later versions of the scripts eg:

    <html>
    <head>
    <!-- jquery -->
     <script src="//code.jquery.com/jquery-latest.js"></script>

    <!-- featherlight -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.3/jquery.detect_swipe.min.js"></script>
        <link href="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.min.css" type="text/css" rel="stylesheet" />
        <script src="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- featherlight gallery -->

<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.1/release/featherlight.gallery.min.js" type="text/javascript"></script>
</head>

    <body>  
<a class="thumbnail gallery" href="a.jpg" > <img src="a.jpg" /> </a>
<a class="thumbnail gallery" href="b.jpg" > <img src="b.jpg" /> </a>
<a class="thumbnail gallery" href="c.jpg" > <img src="c.jpg" /> </a>

    <script>
    $(document).ready(function(){
        $('.gallery').featherlightGallery();
    });
    </script>
    </body>
    </html>
ingleno
  • 36
  • 3