Jul 7, 2018
120 Views
0 0

Kwik Photation

Written by

LIVE PREVIEWBUY FOR $16

Photography – An animated tile-based masonry media wall for images and videos.

The grid can contain several two-sided tiles, each containing more pictures and videos. Tiles can flip to reveal text (html), call actions, buttons and more.

You can animate the web and each tile creates several slideshows.

Use as a gallery, presentation, simple store (yes! – just add a check button) and more.

Kwik Photation – Let Your Imagination Tell Your History

See This In Action

Key Features

  • Responsive Animated Layout
  • View Images & Video
  • Optional Animation Selection
  • Configurable Columns
  • Ongoing Support and Updates

Kwik Photographic Installation

It may be stupid to point out, but Kwik Photography is a jQuery plugin so jQuery is a requirement  :)

Okay, how do you get started?

After downloading Kwik Photography, upload the files to your host server. Logical style sheets CSS files enter your css folder and javascript files in the js folder.

Kwik photography download is structured like this:

  • kwik_photation_v1_0_0
    • CSS
      • mercury-photation.css
    • JS
      • jquery.min.js
      • Kwik-photation.js
      • jquery.waitforimages.js
      • masonry.pkgd.min.js
    • example.html

            

Copy-Insert Style Sheet to on your webpage. 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 just before the last tag. Make sure they are in the following order:

  • < type=”text/javascript” src=”path_to/js/jquery.min.js”>
  • < type=”text/javascript” src=”path_to/js/jquery.waitforimages.js”>
  • < type=”text/javascript” src=”path_to/js/masonry.pkgd.min.js”>
  • < type=”text/javascript” src=”path_to/js/any other JavaScript pages/jQuery plugins you currently use”>
  • < type=”text/javascript” src=”path_to/js/your site javascript page.js”>
  • < type=”text/javascript” src=”path_to/js/kwik-photation.js”>

            
            

And that's it!

Create Now Kwik Photography

To show your Kwik photo, create an HTML element and add the structure to your page – example:

            
            

NOTE: Kwik Photography requires the class Mercury Gallery .

You elaborate the Kwik photo gallery with configurable tiles like this:

            
            

There are 3 sizes for kwik_gallery_item tiles:

            
            

Their sizes are relative to each other – kwik_gallery_item_lg is twice as big as kwik_gallery_item_md twice as kwik_gallery_item_sm

Each tile is then populated as follows:

Just let's add some aminations to Kwik's photo

There are three types of animations that you can add to each tile within your Kwik photo. They are added by using the & # 39; data & # 39; tags for kwik_gallery_item proprietor

  1. Data Mercury Anime – eg. data-kwik-animate = "true" – If it is set to false, the character will not animate
  2. data-kwik-flip – for example. data-kwik-flip = "true" – If it is set to false, the tile will not chip, but will still animate
  3. data-kwik direction – eg. data-kwik-direction = "left" – The default orientation is Slide Up

          
          

An animated kwik_gallery_item tag would look like this

Summarizing a basic structure for a Kwik photograph with a tile

Source

Article Tags:
Article Categories:
Javascript
ThemeForest best selling themes

Jaeho Park completed a Master in Fine Arts at the Hongik University in 1999, followed by a Master in Photographic Studies at the University of Westminster in 2012. After working for many years as a university professor, designer and curator in South Korea.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.