jQuery Image Gallery with Thumbnail Carousel – PikaChoose

Plugin Preview

Share this:

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:	10 months ago
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”.

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