Stacked Polaroid Draggable Image Gallery For jQuery Plugin – Photopile

Polaroid Image Gallery - Photopile
File Size:2.97 MB
Views Total:424
Last Update:March 14, 2018
Publish Date:February 17, 2018
Official Website:Go to website
License:MIT

Photopile is a jQuery  plugin based on polaroid draggable image gallery.the multiple photos are snaky & scattered randomly in a container to use easy to view in window.when click any thumbnail image will open the large view of a photo in a popup in same window and once in view a secondary click returns the photo to the pile.photo thumbnails are draggable.

How to use :

1. Add the jQuery library and jQuery Photopile plugin’s :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="photopile.js"></script>

2. Add the jQuery Photopile plugin’s CSS file :

<link rel="stylesheet" href="photopile.css">

3.  Html structure Wrap the images in a container following the like this :

<ul class="photopile">
<li> <a href="images/01i.jpg"> <img src="images/01t.jpg" alt="Alt 1" title="" width="80" height="60" /> </a> </li>
<li> <a href="images/02i.jpg"> <img src="images/02t.jpg" alt="Alt 2" title="" width="80" height="60" /> </a> </li>
<li> <a href="images/03i.jpg"> <img src="images/03t.jpg" alt="Alt 3" title="" width="80" height="60" /> </a> </li>
...
</ul>

4. Add plugin script at the beginning of photopile.js:

var numLayers = 5;  // number of layers in the pile (max zindex)
var thumbOverlap  = 50; // overlap amount (px)
var thumbRotation = 45; // maximum rotation (deg)
var thumbBorderWidth  = 2;  // border width (px)
var thumbBorderColor  = 'white';// border color
var thumbBorderHover  = '#EAEAEA';  // border hover color
var draggable = true;   // enable draggable thumbnails

// Photo container
var fadeDuration  = 200;// speed at which photo fades (ms)
var pickupDuration= 500;// speed at which photo is picked up & put down (ms)
var photoZIndex   = 100;// z-index (show above all)
var photoBorder   = 10; // border width around fullsize image
var photoBorderColor  = 'white';// border color
var showInfo  = true;   // include photo description (alt tag) in photo container

// Autoplay
var autoplay<a href="https://www.jqueryshare.net/gallery/">Gallery</a>   = false;   // autoplay the photopile
var autoplaySpeed = 5000;   // ms

// Images
var loading= 'images/loading.gif';  // path to img displayed while gallery/thumbnails loads

Done

Change Log

2014-07-24

  • Basic autoplay functionality added that loops through the photopile in sequence. Set variable autoplayGallery = true to use.

2014-07-02

  • Added max-width to thumbnails for large resolutions greater than 1024px

2014-06-23

  • Added a description div element to the photo container that displays an image's alt tag.

2014-05-07

  • Added a description div element to the photo container that displays an image's alt tag.

2014-04-30

  • Added next/prev functionality to navigator and implemented draggable thumbnails using jQuery UI
  • Updating sprites and background images

2014-04-26

  • Added style {-webkit-backface-visibility: hidden;} to thumbnail li's to eliminate jagged edges
  • Developing navigator

2014-04-25

  • Added width and height attributes to thumbnail images

2014-04-24

  • update.

2014-04-21

  • enlarge improvements

2014-04-20

  • Photo container enlarge complete
  • Bug fix in enlarge method (width/height switch)