jQuery Image Gallery with Thumbnail Carousel – PikaChoose

The “PikaChoose” is a multi-features, cross-browser, and multi-layout jQuery image gallery plugin. It creates a beautiful jQuery-based image gallery with a thumbnail carousel. The plugin comes with multiple built-in gallery layouts/styles and UX effects. Users can easily navigate images through the 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 be next to your eyes.
Furthermore, this gallery also displays photo captions and tooltip text. The interface of the gallery can be fully customized with plugin configuration options.

How to Create Image Gallery with Thumbnail Carousel

1. We need to get started with the PikaChoose plugin to create a gallery with a thumbnail carousel. So, first of all, load the 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 an HTML structure for the 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 the jQuery document ready function to activate the image gallery.

$(document).ready(function(){

   $("#pikame").PikaChoose({carousel:true});

});

Advanced Configuration Options for Thumbnail Carousel Image Gallery

The following are some advanced configuration options to create/customize an image gallery.

$("#pikame").PikaChoose({
   autoPlay: true,
});

$("#pikame").PikaChoose({
   speed: 8000,
});

$("#pikame").PikaChoose({
   showCaption: true,
});

$("#pikame").PikaChoose({
   showTooltips: true,
});

$("#pikame").PikaChoose({
   carousel: false,
});

$("#pikame").PikaChoose({
   swipe: true,
});

$("#pikame").PikaChoose({
   carouselVertical: false,
});

$("#pikame").PikaChoose({
   thumbOpacity: 0.4,
});

$("#pikame").PikaChoose({
   text: { play: "", stop: "", previous: "Previous", next: "Next", loading: "Loading" },
});

$("#pikame").PikaChoose({
   transition:[1],
});

$("#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
   
   }
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.