Creating A Full Page Photo Gallery with jQuery Photor Plugin

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

• Looping update

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.