jQuery Fullscreen & Touch-enabled Lightbox Slider Plugin - Fullscreen Swiper

Fullscreen Swiper is a jQuery plugin for creating a responsive, mobile-friendly, fullscreen gallery lightbox that supports both mouse drag and touch swipe navigation.

How to use it:

1. Load jQuery and jQuery Mobile in your document.

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

2. Load iDangero.us' jQuery Swiper plugin after jQuery library.

<link rel="stylesheet" href="swiper/idangerous.swiper.css">
<script src="swiper/idangerous.swiper.js"></script>

3. Load the jQuery Fullscreen Swiper plugin after jQuery library.

<script src="jqm-fullscreen-swiper/jqm-fullscreen-swiper.min.js"></script>

4. Minimum requirements.

$('#btn-basic').on('click', function() {
  fullscreenSwiper('open', {
    id: 'fullscreen-swiper',
    target: '#page-master',
    images: [
      {src: 'images/img1.jpg'}
    ]
  });
});

5. All functionalities.

$('#btn-all').on('click', function() {
  fullscreenSwiper('open', {
    id: 'fullscreen-swiper',
    target: '#page-master',
    zIndex: 999,
    overlayColor: 'rgba(0, 0, 0, .8)',
    initialSlide: 1,
    images: [
      {
        src: 'images/img1.jpg',
        data: [
          ['id', '1'],
          ['name', 'img1.jpg']
        ]
      },
      {
        src: 'images/img2.jpg',
        data: [
          ['id', '2'],
          ['name', 'img2.jpg']
        ]
      },
      {
        src: 'images/img3.jpg',
        data: [
          ['id', '3'],
          ['name', 'img3.jpg']
        ]
      }
    ],
    elements: [{
        type: 'button',
        html: 'I\'m visible everywhere',
        attributes: [
          ['class', 'ui-btn ui-corner-all'],
          ['style', 'bottom: 70px; left: 5%; width: 40%;']
        ],
        event: {
          type: 'click',
          action: function(event, element, image) {
            var output = 'Event type = "' + event.type + '"\n';
            output += 'Clicked element id = "' + element.attr('id') + '"\n';
            output += 'Image id = "' + image.data('id') + '"';
            alert(output);
          }
        }
      },
      {
        when: ['image:name', '===', 'img2.jpg'], // Compare with images data (f.i. 'image:id')
        type: 'button',
        html: 'Click me to close (I\'m only visible on slide 2)',
        attributes: [
          ['class', 'ui-btn ui-corner-all'],
          ['style', 'bottom: 122px; left: 55%; width: 40%;']
        ],
        event: {
          type: 'click',
          action: function(event, element, image) {
            fullscreenSwiper('close', {
    id: 'fullscreen-swiper'
            });
          }
        }
      },
      {
        when: ['image:name', '===', 'img1.jpg'],
        type: 'a',
        html: 'External link (I\'m only visible on slide 1)',
        attributes: [
          ['class', 'ui-btn ui-corner-all'],
          ['style', 'bottom: 50%; left: 5%; width: 40%;'],
          ['href', 'https://www.google.com'],
          ['target', '_blank']
        ],
        event: {
          type: 'click',
          action: function(event, element, image) {
            event.preventDefault();
          }
        }
      }
    ]
  }, function(success, msg) {
    if (!success) {
      alert('ERROR: ' + msg);
    } else
    {
      console.log('ERROR: ' + msg);
    }
  });
});

---

This awesome jQuery plugin is developed by del4y. For more Advanced Usages, please check the demo page or visit the official website.