jQuery Image Gallery with Thumbnail Carousel – PikaChoose

jQuery Image Gallery with Thumbnail Carousel
Code Snippet:PikaChoose
Author: Jeremy Fry
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 7,129
License: MIT
Edit Code online: View on CodePen
Read More

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.

Option Description, Default, Type
autoPlay This option is used to enable/disable auto-play. Default: true, Type: Boolean.

$("#pikame").PikaChoose({
   autoPlay: true,
});
speed It defines 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
   
   }
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...