jQuery Plugin For Stacked Polaroid Image Gallery - Photopile
File Size: | 4.2 MB |
---|---|
Views Total: | 10017 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
See also:
- jQuery Draggable and Rotatable Photo Viewer - Polaroid
- jQuery Draggable Polaroid Photo Gallery Plugin
How to use it:
1. Include the jQuery library and jQuery Photopile plugin's javascript in the footer.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="photopile.js"></script>
2. Include the jQuery Photopile plugin's stylesheet in the header.
<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.
<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. Set up the plugin 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 autoplayGallery = false; // autoplay the photopile var autoplaySpeed = 5000; // ms // Images 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.