Lunar - jQuery Photography Portfolio

Lunar - Photography Portfolio, a very clean and simple jQuery Plugin that helps you build beautiful photo albums. Some of the plugin’s strong points are: fully responsive grid, high performance, modern look & feel, clean and spacious design.

If you have any questions, please use the plugin's comment page. ( Contact ).


Author: jayc
Contact: SakuraPlugins
Author URL: SakuraPlugins
Item URL: Lunar
Current Version: 1.0.0
Documentation Version 1.0.0
Created: 2015-Jan-23
Modified: 2015-Jan-23

1. Plugin Install

Brief information about how to install the script from scratch

Step 1 Unzip the main file (the file that you have downloaded when you have purchased the plugin). The plugin is being showcased within a demo template called "plugin-name"-showcase.

Step 2 Double click on index.html and see if it's working.

Step 3 Open index.html with your preffered editor and investigate the code (script and styles are located within the head tag starting and ending with the LUNAR PLUGIN RELATED SCRIPTS AND STYLES comment, the actual gallery is located within the body starting and ending with LUNAR GALLERY comment).

The plugin requires a few assets like CSS, JS files and some icons. You can find the plugin's files as follow:

Main CSS file: lunar_assets/lunar.css

Main JS file: lunar_assets/lunar.js

Icons: lunar_assets/img/*

Step 1 Copy the enteire folder "lunar_assets" to the root folder of your template

Step 2 Open/edit the index.html from the demo template, copy all the code below and paste it within the "head" tag of your page.

Step 3 Copy the code below and paste it within the "body" tag of your page.

NOTE! This is the container that will load the gallery albums.

2. Add gallery items

Add content.

NOTE! All album items mush have a "data-width" value as album cover size and a "data-thumbimage" value as album cover image, (it's needed for ratio positioning, even for video covers) Ex: data-width="50" means that the cover would take 50% of the space and data-thumbimage="path/to/image" will point to the album cover image.
NOTE! Add album items within the "lunar-gallery-ui" container @see above.

Album example

NOTE! The album below has a galery which contains two items (photos), you need to specify the links to the thumbs and to large image for the lightbox for each gallery item.

Special Album example

NOTE! A "special album cover" fills the full width of the container (having the featured image on the left or on the right side). In order to have a special album set data-is-special to "true" than specify the side of the image "data-special-side" (left/right).

Video Album example

NOTE! Add a video cover to the album by adding the "video-cover" container. Set "data-preview-video-all-time" to true in rder to loop the video, otherwise (if "false") will only play on hover.
NOTE! Preview Image ("data-thumbimage") is still mandatory for sizing puroses. Preview video is a small self hosted video that would loop itself, creating a fancy effect on album's covers. In order to play on all browsers you should upload two files (a *.MP4 video with H264 video codec and a *.WEBM video).

External URL Album example

NOTE! In order to redirect the user to another page when click on the album, set up the "data-customurl" and the "data-target" properties.

JS settings

NOTE! In order to set up the "OPEN ALBUM" label open/edit lunar_assets/lunar.js and edit SK_LUNAR.openAlbumLabel variable.