Fullscreen Product Slideshow with Image Zoom/Pan - Ap Image Fullscreen

A jQuery plugin used to display your product pictures in a responsive, touch-enabled, fullscreen slideshow with support for image zoom & pan functionalities provided by jQuery Ap Image Zoom plugin.

Basic Usage:

1. Include jQuery Ap Image Fullscreen and jQuery Ap Image Zoom's stylesheet files in the document.

<link rel="stylesheet" href="css/ap-image-zoom.min.css">
<link rel="stylesheet" href="css/ap-image-fullscreen.css">

2. Include jQuery library and other required resources in the document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- hammer.js JS library. Add touch gestures support to the plugin. -->
<script src="js/hammer.min.js"></script>

<!-- jquery mousewheel plugin. Add mouse wheel support to the plugin. -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

<!-- fullscreen JS library. For cross-browser usage of the JavaScript Fullscreen API. -->
<script src="js/screenfull.js"></script>

<script src="js/ap-image-zoom.js"></script>
<script src="js/ap-image-fullscreen.js"></script>

3. Insert a list of product images into your document as follows.

<ul class="gallery">
  <li><a href="large-1.jpg" class="fullscreen-image"><img src="small-1.jpg"></a></li>
  <li><a href="large-2.jpg" class="fullscreen-image"><img src="small-2.jpg"></a></li>
  <li><a href="large-3.jpg" class="fullscreen-image"><img src="small-3.jpg"></a></li>
  ...
</ul>

4. Initialize the plugin with default options.

$('.gallery .fullscreen-image').apImageFullscreen({
autoReassign: true,
autoOpen: false,
lazyLoad: 'open',// Options: false, 'instant', 'open', 'visible'
buttons: { // Options for position: left|right, top|center|bottom
  close:    { visible: true, position: 'right, top', theme: 'white' },
  next:     { visible: true, position: 'right, bottom', theme: 'white' },
  previous: { visible: true, position: 'right, bottom', theme: 'white' }
},

disableScreenfull: false
})

Change logs:

2016-03-09

• New events: open and close

2016-03-08

• Added imageLoaded event

2014-12-17

• Many changes

2014-10-01

• Code refactoring

---

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