By : Kwikbitzonline Published On Friday, April 26, 2024, 01:43 In JavaScript
The grid can hold multiple two sided tiles can each hold multiple images and videos. Tiles 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.
<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>
<div class="kwik_gallery_item" data-kwik-animate="true" data-kwik-flip="true" data-kwik-direction="left" ></div>
<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>