Include jquery and PikaChoose.js in the head of your page. PikaChoose must be included after Jquery. In your document ready statement (see example in downloaded file) run the following function.


If you want to specify options include them like the following example.

$("#divID").PikaChoose({autoPlay:true, transition:[5]});

Note the commas separating the values and the curly brackets surrounding the options.


showCaption: boolDefault: true
transition: arrayDefault: [-1]
Transitions effects. For random use [-1]. To have fading twice then a different effects use [0,0,1] etc. If your images are different sizes then use transition:[0]

The IESafe option WILL override your transition. If you want your pick to show even in IE use IESafe:false;
A quick rundown of the transitions:

  • 0: fade out then fade in
  • 1: full frame cross fade
  • 2: paneled fold out
  • 3: horizontal blinds
  • 4: vertical blinds
  • 5: small box random fades (personal favorite)
  • 6: full image blind slide
autoPlay: boolDefault: true
If set to true the slideshow will start playing automatically

speed: integerDefault: 5000
The speed that a picture will display before moving onto the next during a slideshow

text: objectDefault: {previous:”Previous”, next:”Next”}
Text for each of the visible text items. Use for localization.

$("#id").PikaChoose({text: {previous: "Previous", next: "Next" }});
Using your own thumbnailsClick for explanation
PikaChoose will create thumbnails for you, but if you want to use your own it’s easy. You need to add a ref attribute to your img tags.

<img src="thumbnail.jpg" ref="fullsize.jpg" >
IESafe: boolDefault: false
Reverts back to the full frame cross fade of Internet Explorer. This is needed due to IE 6/7′s slowness well animating background images.

showTooltips: boolDefault: false
Uses the caption as a tooltip for thumbnails. Great if you want to turn off captions, but still have some visible text for each image.

thumbOpacity: floatDefault: 0.4
Sets the opacity for non active images.

startOn: intDefault: 0
The image PikaChoose should start on. (programatic numbering, 0 is the first image)

animationSpeed: intDefault: 600
The speed at which transitions 0,1,3,4,6 will run at

carousel: boolDefault: false
Enabling this activates jCarousel for the slideshow.


If you want a vertical slideshow use the carouselVertical option as well.

$("#id").PikaChoose({carousel:true, carouselVertical:true});
data: arrayDefault: null
You can pass an array of images to PikaChoose instead of a list. PikaChoose will load and build the structure out for you. You must specify a div for Pikachoose to load in, not a list when using data!

var a = [{"image":"../../1.jpg","caption":"Any donation is appreciated. PikaChoose is free to use!","link":"","title":"Image 1"},
	{"image":"../../2.jpg","caption":"Be sure to check out for updates.","link":"","title":"Image 2"}];

API Hooks

Overriding FunctionsNot Reccomended

By default there is two ways to modify PikaChoose when running your code. The first is to simple extend the PikaChoose function and rewrite any
function you wish to be different. And example would be over writing the next button to perform a different action like below

	nextClick: function(){

Though this works, you’ll have to rewrite the entire function

API HooksReccomended

Starting with 4.1 I’ve begun to add hooks into PikaChoose which can allow you to change behaviors while maintain the defaults. The list below shows the available hooks and roughly the time they are called.

  • animationFinished: just as the the transition completes on the main animation
  • buildFinished: called as soon as PikaChoose is done building the slideshow
  • bindFinished: called after the events are bound. This is the last thing to happen in PikaChoose function.
  • buildThumbStart: called before the thumbnails are parsed
  • buildThumbFinish: called after thumbnails are parsed (does not mean that they have loaded and fired their .load function yet)

To use these hooks define your function and then call it like the follow:

function myFunction(self){
$("#id").PikaChoose({animationFinished: myFunction});

The variable you pass to your custom function will be populated with the PikaChoose object.

PikaChoose ObjectPassed to custom functions

This object is passed to your custom function. Below is a partial list of properties and what they point to

The currently active thumbnail. This is not the main image
The caption div element
The main image. This also has the binds for the clicking to a new page
The ‘a’ tag that wraps the main image
The UL that was passed to PikaChoose, or created from the data


  • Sped up some of the transitions.
  • Main image is no longer a link when a link isn’t present.
  • Fix with pulling in items for a data source
  • Fixed a bug with transition 7 and captions.
  • Added the options startOn, and thumbOpacity.
  • Pikachoose can be called using .PikaChoose() or .pikachoose() now
  • Added transition 7, slide in from the side.
  • Added ability to load items from a datasource.
  • Fixed problems with multiple galleries on a single page.
  • Preserved titles for links image links (for fancybox).
  • Added API Hooks.
  • Fixed bugs from aforementioned api hooks :D
  • Fixed a cosmetic bug.
  • Major code reworking.
  • Fixed with captions jumping ahead and links being triggered.
  • Added new transitions.
  • IE will now properly show the page as being fully loaded.
  • Fixed bug with slideshow not looping.
  • Fixed issues with fades jumping to next image instead of smooth transitions.
  • IE will now properly show the page as being fully loaded.
  • Fixed a bug where some images failed to display after loading.
  • Now works correctly with IE6/7 using strict doctypes!
  • Cleaned up some code to improve performance. Removed function ‘prep_thumbs()’ as it had no reason to be seperated at this point.
  • Image will no longer ‘skip’ when using user_thumbs.

Comments are closed.