Message: Return type of CI_Session_files_driver::open($save_path, $name) should either be compatible with SessionHandlerInterface::open(string $path, string $name): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Message: Return type of CI_Session_files_driver::close() should either be compatible with SessionHandlerInterface::close(): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Message: Return type of CI_Session_files_driver::read($session_id) should either be compatible with SessionHandlerInterface::read(string $id): string|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Message: Return type of CI_Session_files_driver::write($session_id, $session_data) should either be compatible with SessionHandlerInterface::write(string $id, string $data): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Message: Return type of CI_Session_files_driver::destroy($session_id) should either be compatible with SessionHandlerInterface::destroy(string $id): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Message: Return type of CI_Session_files_driver::gc($maxlifetime) should either be compatible with SessionHandlerInterface::gc(int $max_lifetime): int|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Photation – an animated tile based masonry grid media-wall for images and videos.
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.
Kwik Photation – let your imagination tell your story
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:
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>
