Download jQuery Plugin For Stacked Polaroid Image Gallery – Photopile

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Stacked Polaroid Image Gallery – Photopile, hope it will help you in programming stack.

File Size:	4.2 MB
Views Total:	8956
Last Update:	3 years ago
Publish Date:	7 years ago
Official Website:	Go to website
License:	MIT

Demo Download

Photopile is a jQuery based polaroid image gallery that the photos are stacked & scattered randomly in a container and will display the larger version of a photo in a popup window when clicked.

How to use it:

1. Include the jQuery library and jQuery Photopile plugin’s javascript in the footer.

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

`2`	`<script` `src="photopile.js"></script>`

2. Include the jQuery Photopile plugin’s stylesheet in the header.

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

3. Wrap the images in a container following the Html structure like this. Use <a> tag’s href attribute to specify the large version of your images.

1
<ul class="photopile">

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

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

4
<li> <a href="images/03i.jpg"> <img src="images/03t.jpg" alt="Alt 3" title="" width="80" height="60" /> </a> </li>

5
...

6
</ul>

4. Set up the plugin at the beginning of photopile.js

01
var numLayers = 5;  // number of layers in the pile (max zindex)

02
var thumbOverlap  = 50; // overlap amount (px)

03
var thumbRotation = 45; // maximum rotation (deg)

04
var thumbBorderWidth  = 2;  // border width (px)

05
var thumbBorderColor  = 'white';// border color

06
var thumbBorderHover  = '#EAEAEA';  // border hover color

07
var draggable = true;   // enable draggable thumbnails

08
 
09
// Photo container

10
var fadeDuration  = 200;// speed at which photo fades (ms)

11
var pickupDuration= 500;// speed at which photo is picked up & put down (ms)

12
var photoZIndex   = 100;// z-index (show above all)

13
var photoBorder   = 10; // border width around fullsize image

14
var photoBorderColor  = 'white';// border color

15
var showInfo  = true;   // include photo description (alt tag) in photo container

16
 
17
// Autoplay

18
var autoplay<a href="https://www.jqueryscript.net/gallery/">Gallery</a>   = false;   // autoplay the photopile

19
var autoplaySpeed = 5000;   // ms

20
 
21
// Images

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

Change log:

2018-06-06

JS update

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)

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

source : jquery.net

How to use it:

Change log:

Share this:

Related posts: