Polaroid Image Gallery

Responsive Polaroid Image Gallery - is a simple image gallery. Currently it requires jQuery but in the future it shall be with vanilla/plain JavaScript.

View Example

HTML setup

Create an HTML file with following tag and ID, the rest will be handled by the script/s

<div id="app"></div>

Scripts

Add Scripts before body closing tag, and you almost there. Dont forget JQuery & Polaroid Caption font - see dependencies section below

<script src=".path-to-jquery-file"></script>
<script src=".path-to-image-gallery-json-file"></script>
<script src=".path-to-polaroid-gallery-javascript"></script>

Images

Add your Images in a JSON file. The name of JSON should match the name you placed in the scripts area. Note that the varible "imageGalleryData" should be left as is. If changed the script won't work.

var imageGalleryData = [
    {
        caption: "Image caption",
        photo: "../path-to-image"
    },
    {
        caption: "Image caption",
        photo: "../path-to-image"
    }
    {
        caption: "Image caption",
        photo: "../path-to-image"
    }
]

Dependencies

JQuery Download JQuery
Font family for polaroid caption - Shadows Into Light

Share This Project

Tweet Project | Share on Facebook | Share on LinkedIn