Documentation

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.

 $("#divID").PikaChoose();
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.

Options

showCaption: boolDefault: true
$("#id").PikaChoose({showCaption:false});
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
$("#id").PikaChoose({transition:[0]});
autoPlay: boolDefault: true
If set to true the slideshow will start playing automatically
$("#id").PikaChoose({autoPlay:false});
hoverPause: boolDefault: false
If set to true the slideshow will pause playing when the main image is hovered over
$("#id").PikaChoose({hoverPause:true});
stopOnClick: boolDefault: false
Determines wether the slideshow stops auto play after the user clicks on an image.
$("#id").PikaChoose({stopOnClick: true});
speed: integerDefault: 5000
The speed that a picture will display before moving onto the next during a slideshow
$("#id").PikaChoose({speed:2000});
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 set the src for your images to your thumbnail image. Then you’ll add a ref attribute (not rel!) with the full size image like the example below. PikaChoose will pull in the full size image automatically.
<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 when using CSS background image animations.
$("#id").PikaChoose({IESafe:true});
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.
$("#id").PikaChoose({showTooltips:true});
thumbOpacity: floatDefault: 0.4
Sets the opacity for non active images.
$("#id").PikaChoose({thumbOpacity:0.1});
startOn: intDefault: 0
The image PikaChoose should start on. (programatic numbering, 0 is the first image)
$("#id").PikaChoose({startOn:2});
animationSpeed: intDefault: 600
The speed at which transitions 0,1,3,4,6 will run at
$("#id").PikaChoose({animationSpeed:4000});
thumbChangeEvent: stringDefault: ‘click.pikachoose’
This changes the event that causes PikaChoose to change images. Use the following example to change it to mouseover
$("#id").PikaChoose({thumbChangeEvent:'mouseover.pikachoose'});
carousel: boolDefault: false
Enabling this activates jCarousel for the slideshow.
$("#id").PikaChoose({carousel:true});
If you want a vertical slideshow use the carouselVertical option as well.
$("#id").PikaChoose({carousel:true, carouselVertical:true});
fadeThumbsIn: boolDefault: false
Enabling this will fade in the UL after PikaChoose has loaded. You must manually set the UL to display:none in your CSS for this to have an effect.
$("#id").PikaChoose({fadeThumbsIn: 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":"http://pikachoose.com","title":"Image 1"},
	{"image":"../../2.jpg","caption":"Be sure to check out PikaChoose.com for updates.","link":"http://pikachoose.com","title":"Image 2"}];
$("#divID").PikaChoose({data:a});

Public Methods

You can access PikaChoose programatically and call functions to effect the slideshow. The first parameter is the list element.
NextAdvances slideshow to next slide

Advances the slideshow to the next slide. You can call this anytime after you have called PikaChoose. Replace #pikame with the id of your UL.

$('#pikame').data('pikachoose').Next();
PrevMoves slideshow to previous slide

Moves the slideshow to the next slide. You can call this anytime after you have called PikaChoose. Replace #pikame with the id of your UL.

$('#pikame').data('pikachoose').Prev();
GoToMoves slideshow to a specific slide

Moves the slideshow to the specified slide. You can call this anytime after you have called PikaChoose. Replace #pikame with the id of your UL.

$('#pikame').data('pikachoose').GoTo(3);
PauseStart autoplay

Pauses the slideshow. You can call this anytime after you have called PikaChoose.

$('#pikame').data('pikachoose').Pause();
PlayPauses slideshow

Resumes the slideshow. You can call this anytime after you have called PikaChoose.

$('#pikame').data('pikachoose').Play();

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

$.PikaChoose.fn.extend({
	nextClick: function(){ 
		alert("The next button was clicked"); 
	}
});

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){
	console.log(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

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