The “PikaChoose” is a multi-features, cross-browser and multi-layout jQuery image gallery plugin. It creates beautiful jQuery based image gallery with thumbnail carousel. The plugin comes with multiple built-in gallery layouts / styles and UX effects. Users can easily navigate images through next previous buttons, touch swipe and thumbnail navigation. You just need to insert your image links and caption in gallery HTML, then a magical gallery will next to your eyes.
Furthermore, this gallery also display photos caption and tooltip text. The interface of gallery can be fully customize with plugin configuration options.
Plugin Overview
Plugin: | PikaChoose |
Author: | Jeremy Fry |
Licence: | MIT Licence |
Published: | September 20, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.9.1 or Latest version |
File Type: | zip archive (HTML, CSS, JavaScript and mages ) |
Package Size: | 507 KB |
How to Create Image Gallery with Thumbnail Carousel
1. We need to getting started with PikaChoose plugin to create gallery with thumbnail carousel. So, first of all load jQuery JavaScript library and gallery’s CSS and JS file into your webpage.
<!-- jQuery --> <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <!-- PikaChoose CSS --> <link type="text/css" href="styles/bottom.css" rel="stylesheet" /> <!-- PikaChooese JS --> <script src="lib/jquery.jcarousel.min.js"></script> <script src="lib/jquery.pikachoose.min.js"></script> <script src="lib/jquery.touchwipe.min.js"></script>
2. After loading all necessary assets, create HTML structure for gallery as follows:
<div class="pikachoose"> <ul id="pikame" class="jcarousel-skin-pika"> <li><a href="#1"><img src="path/to/image1.jpg"/></a><span>Your image caption goes here.</span></li> <li><a href="#3"><img src="path/to/image2.jpg"></a><span>Example caption</span></li> <li><a href="#4"><img src="path/to/image3.jpg"></a><span>Example caption </span></li> . . . <li><a href="#n"><img src="path/to/image-n.jpg"></a><span>Example caption - N </span></li> </ul> </div>
3. Now, initialize the plugin in jQuery document ready function to active the image gallery.
$(document).ready(function(){ $("#pikame").PikaChoose({carousel:true}); });
Advance Configuration Options for Thumbnail Carousel Image Gallery
The following are some advance configuration options to create / customize “target keywords”.
Option | Description, Default, Type |
---|---|
autoPlay |
This option is used to enable / disable auto play. Default: true, Type: Boolean.
$("#pikame").PikaChoose({ autoPlay: true, }); |
speed |
It define the transition speed (in milliseconds) for sliding of gallery images. Default: 5000, Type: Number.
$("#pikame").PikaChoose({ speed: 8000, }); |
showCaption |
Decide weather to show or hide caption of gallery images. Default: true, Type: Boolean.
$("#pikame").PikaChoose({ showCaption: true, }); |
showTooltips |
It enable / disable tooltip text (the text shows when hover thumbnails. Default: false, Type: Boolean.
$("#pikame").PikaChoose({ showTooltips: true, }); |
carousel |
This option used to enable / disable carousel for thumbnails. Default: false, Type: Boolean.
$("#pikame").PikaChoose({ carousel: false, }); |
swipe |
It enable or disable touch swipe for gallery images. Default: true, Type: Boolean.
$("#pikame").PikaChoose({ swipe: true, }); |
carouselVertical |
Decide weather to show vertical carousel for gallery thumbnails. Default: false, Type: Boolean.
$("#pikame").PikaChoose({ carouselVertical: false, }); |
thumbOpacity |
This option define the CSS opacity property for inactive thumbnails. Default: 0.4, Type: Number / Flaot.
$("#pikame").PikaChoose({ thumbOpacity: 0.4, }); |
text |
This option is useful to show (define) custom text for gallery UI. Type: Array.
$("#pikame").PikaChoose({ text: { play: "", stop: "", previous: "Previous", next: "Next", loading: "Loading" }, }); |
transition |
It switch the built-in transitions. Default: [1], Type: Array.
$("#pikame").PikaChoose({ transition:[1], }); |
hideThumbnails |
If you want to hide the image thumbnails, then turn this option true. Default: false, Type: Boolean.
$("#pikame").PikaChoose({ hideThumbnails: false, }); |
Gallery Callback Functions
The following are some callback functions for jquery image gallery with thumbnail carousel.
1. To run custom code after animation finished.
$("#pikame").PikaChoose({ animationFinished: function(){ //code to execute } });
2. After build finished.
$("#pikame").PikaChoose({ buildFinished: function(){ //code to execute } });
3. Run custom function on binds finished.
$("#pikame").PikaChoose({ bindsFinished: funcion(){ //code to run } });