Photation – a tile based masonry grid media-wall for images and videos.
The two sided tiles can hold multiple images, videos and can flip to reveal text (html), call to actions, buttons and more.
You can animate the grid and each tile creating multiple slideshows.
Use as a gallery, presentation, simple shop (yes! – just add a checkout button) and much more.
Kwik Photation – the potential is your imagination
See it in action here
Key features
- Responsive animated layout
- Display images and video
- Optional animation choices
- Configurable columns
- Ongoing support & updates
Kwik photation installation
It may be silly to point out but Kwik photation is a jQuery plugin so jQuery is a requirement 
OK so how do you get started?
After downloading Kwik photation upload the files to your host server. Logically stylesheet CSS files go into your css folder, and the javascript files into your js folder.
The Kwik photation download is structured like this:
- kwik_photation_v1_0_0
- CSS
- JS
- jquery.min.js
- kwik-photation.js
- jquery.waitforimages.js
- masonry.pkgd.min.js
- example.html
Copy-paste the stylesheet <link>’s into the <head> of your web page. Make sure they are in the following order:
- < link rel=”stylesheet” type=”text/css” href=”path_to/css/any other style sheets you currently use”>
- < link rel=”stylesheet” type=”text/css” href=”path_to/css/kwik-photation.css”>
Add the JavaScript pages near the end of your pages, right before the closing </body> tag. Make sure they are in the following order:
- < type=”text/javascript” src=”path_to/js/jquery.min.js”></script>
- < type=”text/javascript” src=”path_to/js/jquery.waitforimages.js”></script>
- < type=”text/javascript” src=”path_to/js/masonry.pkgd.min.js”></script>
- < type=”text/javascript” src=”path_to/js/any other JavaScript pages/jQuery plugins you currently use”></script>
- < type=”text/javascript” src=”path_to/js/your site javascript page.js”></script>
- < type=”text/javascript” src=”path_to/js/kwik-photation.js”></script>
And that’s it!
Now create the Kwik photation
To display your Kwik photation you need to create an HTML element and add it’s structure on your page – example:
<div id="kwik-gallery" class="kwik-gallery"></div>
NOTE: Kwik photation requires the class kwik-gallery.
You populate the Kwik photation gallery with configurable tiles like this:
<div class="kwik_gallery_item"></div>
There are 3 sizes for kwik_gallery_item tiles:
<div class="kwik_gallery_item kwik_gallery_item_lg"></div>
<div class="kwik_gallery_item kwik_gallery_item_md"></div>
<div class="kwik_gallery_item kwik_gallery_item_sm"></div>
Their sizes are relative to each other – kwik_gallery_item_lg being twice as large as kwik_gallery_item_md which is twice as large as kwik_gallery_item_sm
Each tile is then populated as follows:
<div class="kwik_gallery_carousel">
<br /><div class="kwik_gallery_flipper">
<br /><div class="kwik_gallery_front">
<br />A list of <img /> tags for the images you want in each tile
<br /></div>
<br /><div class="kwik_gallery_back">
<br /><div class="kwik_gallery_back_content">
<br />The text you want to display when a tile is flipped
<br /></div>
<br /></div>
<br /></div>
<br /></div>
Right lets’ add some amination to the Kwik photation
There are three types of animation you can add to each tile within your Kwik photation. They are added by applying ‘data’ tags to the kwik_gallery_item holder
- data-kwik-animate – e.g. data-kwik-animate=”true” – If set to false the tile will not animate
- data-kwik-flip – e.g. data-kwik-flip=”true” – If set to false the tile will not flip but will still animate
- data-kwik-direction – e.g. data-kwik-direction=”left” – The default direction is Slide Up
An animated kwik_gallery_item tag would look like this
<div class="kwik_gallery_item" data-kwik-animate="true" data-kwik-flip="true" data-kwik-direction="left" ></div>
To sum up a basic structure for a Kwik photation with one tile
<div id="kwik-gallery" class="kwik-gallery"></div>
<br /><div class="kwik_gallery_item" data-kwik-animate="true" data-kwik-flip="true" data-kwik-direction="left">
<br /><div class="kwik_gallery_carousel">
<br /><div class="kwik_gallery_flipper">
<br /><div class="kwik_gallery_front">
<br /><img src="image_folder_url/some_image_name/>
<br /><img src="image_folder_url/some_image_name/>
<br /><img src="image_folder_url/some_image_name/>
<br /></div>
<br /><div class="kwik_gallery_back">
<br /><div class="kwik_gallery_back_content">
<br />The text you want to display when a tile is flipped
<br /></div>
<br /></div>
<br /></div>
<br /></div>
<br /></div>
<br /></div>
Download Kwik Photation (Sliders)
