jQuery Responsive Image Gallery with Thumbnails

The “PikaChoose” is a jQuery Responsive Image Gallery with Thumbnails which has tones of features. It comes with a built-in layout/styles and UX effects.

The gallery has almost all the feature which any carousel gallery needs. You can customize it as you want. It supports all kind of major browsers and works well on mobile devices.

The users can navigate the images using and next/previous button or by clicking on the thumbnails. You can also swipe the images on mobile due to its touch enable function. Furthermore, it has the tooltip total number of images when you hover the image. You can also turn on the automatic image sliding functionality to offer better user experience or carousel gallery.

In addition, this responsive gallery allows you to change the thumbnail position. You can set the thumbnail to bottom, right or left of the gallery.

It works in a very simple way. All you need to insert your images within the unordered list element. You can also add any HTML element such as H, P, etc. By adding the span tag, you can activate the photo caption and tooltip functionality.

However, the gallery interface is superbly clean and nice. It doesn’t have anything fancy which enable you to easily customize it as you want to match with your design layout.

How to Create Image Gallery with Thumbnail Carousel

To get started with thumbnail gallery carousel, you need to load the following the files in the head tag of your HTML document.

<!-- 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>

After adding all the necessary asset, you need to create the HTML structure of the gallery. Simply define a wrapper with a class “pikachoose” and create an unordered list element. Each element holds the img and a span tag.

<div class="pikachoose">
Basic example - with looping carousel
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="#"><img src="img/1.jpg"/></a><span>This is an example of the basic theme.</span></li>
        <li><a href="#"><img src="img/2.jpg"/></a><span>jCarousel is supported and can be integrated with PikaChoose!</span></li>
        <li><a href="#"><img src="img/3.jpg"/></a><span>Be sure to check out <a href="#">PikaChoose.com</a> for updates.</span></li>
        <li><a href="#"><img src="img/4.jpg"/></a><span>You can use any type of html you want with PikaChoose</span></li>
        <li><a href="#"><img src="img/5.jpg"/></a><span>PikaChoose survives on your donations! Keep the project alive with a donation.</span></li>
    </ul>
</div>

Now, initialize the gallery plugin in jQuery document ready function to activate the picture gallery.

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

Thumbnails Gallery Advanced Configuration Options

The following are some advanced 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.

To run custom code after animation finished.

$("#pikame").PikaChoose({
  animationFinished: function(){
   
   //code to execute
  
  }
});

After build finished.

$("#pikame").PikaChoose({
   buildFinished: function(){
   
   //code to execute
   
   }
});

Run custom function on binds finished.

$("#pikame").PikaChoose({
   bindsFinished: funcion(){
   
   //code to run
   
   }
});