Creating A Full Page Photo Gallery with jQuery Photor Plugin

Creating A Full Page Photo Gallery with jQuery Photor Plugin
File Size: 1.82 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.

Features:

  • Mouse drag, touch swipe, keyboard and thumbnail navigation supported.
  • Click the right side of the gallery will go to next photo.
  • Click the left side of the gallery will back to previous photo.
  • Auto resize images to fit for your responsive design.

How to use it:

1. Place the latest version of jQuery library and jQuery photor plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dist/photor.js"></script>

2. Markup html structure. Use a tag to specify the large version of the images.

<div class="photor">
<div class="photor__viewport">
<div class="photor__viewportLayer"></div>
<div class="photor__viewportControl">
<div class="photor__viewportControlPrev"></div>
<div class="photor__viewportControlNext"></div>
</div>
</div>
<div class="photor__thumbs">
<div class="photor__thumbsWrap"> 
<a href="demo/images/1.jpg" class="photor__thumbsWrapItem"> <img src="demo/thumbs/1.jpg" alt="" class="photor__thumbsWrapItemImg"> </a> 
<a href="demo/images/2.jpg" class="photor__thumbsWrapItem"> <img src="demo/thumbs/2.jpg" alt="" class="photor__thumbsWrapItemImg"> </a> 
<a href="demo/images/3.jpg" class="photor__thumbsWrapItem"> <img src="demo/thumbs/3.jpg" alt="" class="photor__thumbsWrapItemImg"> </a>
...
</div>
</div>
</div>

3. The required CSS to style the gallery.

<link rel="stylesheet" href="dist/photor.min.css">

4. Initialize the gallery with options.

<script>
$(document).ready(function() {
$('.photor').photor({

single: false, 
current: 0, 
count: 0,   
last: -1,  
delay: 300,
loop: false,
showThumbs: 'thumbs',       // thumbs / dots / null
keyboard: true,
modifierPrefix: '_',  
ieClassPrefix: '_ie',
slidesOnScreen: 1, 

});

});
</script>

Change logs:

2015-11-09

  • Fixed plugin crash without 'thumbs' DOM-nodes

2015-08-19

  • Fixed: Incorrect behavior on click by the prev button

2014-12-03

  • fix IE8 loadImage event handlers

2014-11-28

  • Fix image size detection

2014-11-28

  • Fix image size detection

2014-07-22

  • Added slidesOnScreen option

2014-05-22

  • Fix bug with modifier 'animated'

2014-05-21

  • Geе float value of viewport width

2014-05-19

  • Indent between slides (fix)

2014-05-19

  • Fix bug with dragging in IE10

2014-05-16

  • Transition improvement

2014-05-15

2014-04-16

  • Added Callback on init

2014-04-15

  • Fix in init, blockPrefix in params

2014-04-02

  • Fix bug on resize (with using dots)
  • Copy only existing classes

2014-03-26

  • Prevent keyboard control if input, textarea, select or contenteditable are focused

2014-03-22

  • IE8 support

2014-02-21

  • TranslateX for Opera and IE9
  • JSdoc syntax fix

2014-02-18

  • Disable double init
  • Webkit touch events

 


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