Kwik Photation (Sliders)

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
  - kwik-photation.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>