jQuery Image Gallery with Thumbnail Carousel – PikaChoose

September 20, 2019 admin Gallery 0

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 Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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
Demo Download

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
   
   }
});

Related jQuery Plugins: