Images by David Lanham from The Icon Factory
PikaChoose is customizable with a ton of awesome options!
Use custom images or let PikaChoose create thumbs for you.
Tested for IE7+ works smoothly and flawlessly 
It can't get any easier to use than PikaChoose!
Demo
Designed and developed by Jeremy Fry version 4 of the PikaChoose jQuery Image Gallery is now available! Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things. Check out this howto on integrating Fancybox with PikaChoose.
Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Now there is even Premium themes available to make PikaChoose really stand out! Check them out here: Premium Themes
More Examples
PikaChoose can be customized in a ton of different ways! Here’s some examples of different layouts
- Simple Layout Has no thumbnails or control buttons
- With Tooltips Displays the caption above thumbs
- With Fancybox Open large image in modal window
- Classic Theme A premium theme
- Whiteout Theme A premium theme
Looking for a wordpress plugin? Gerben over at Gport has create Magic Gallery a WordPress plugin that supports PikaChoose. This post: Magic Gallery Released has all the details!
I’m having a problem: my tooltip has no opacity or background colour. Changing the figures related to tooltips in the css file doesnothing. I’m using the css3 one.
Please help.
Great tool, btw!
Hello, first thanks for the plugin.
Now I have a doubt:
How do I call a method via javascript pikachoose plugin that forces the exchange of the current frame by one that I want?
Is there any way to do this?
Tks!!
Hi,
First, thanks for this great plugin.
I am using pikachoose with fancybox and i am wondering how to show next and prev arrows inside the fancybox ?
Many thks,
It’s a little complicated. If you check below there is a post outlining it.
hi, it would be nice if the carousel restart once it stops after clicking a pic
thanks !
Grab the newest version. That’s now the default!
nice ! many thanks !
Hi,
Your plugin looks great but I’m having a problem when using it on Firefox. Sometimes the images seems to “jump” before the smooth transition. It´s working ok in Safari. Any help is much appreciated.
Here you have an example
http://www.citywellness.es/mayaurbanspa
thanks!
Are you still having issues? I’m checking right now in FF and it looks okay.
As I do so that when the User click a thumb to follow a javascript function that I can manipulate the object that generated by the plugin eh?
Can you understand?
That is, when the user must click on the thumbnails to perform a function that receives the object as a parameter of the plugin.
Not sure I follow, but check out the api section in the docs. I think that might be what you’re looking for.
hi thank you for your jquery i have question can i use in software that i want to sell it?
You can use PikaChoose in comercial projects, but you cannot resell the script itself.
Hi,
Loaded the carousel slider into a wordpress theme. Seems to work fine. However, on the iphone (4) the images nav line is not scrolling…
Any ideas?
Thanks
Nimrod
It should work. Do you have a url I can see this at?
wondering is it possible to put a next and previous batch of thumbnails. so you can skip some less attracting pictures. thanks its a great slider
You can use jcarousel to setup something like this. Since the carousel has it’s own prev/next buttons they will skip photos without changing them. The buttons are already there, just hidden.
Hello!
The best slider!
There is only one thing I can’t find…
Is it possible to let the slider control next and previous img always visible ? As soon as I hover the slider they disappear and would only appear when hovering the slider…
Even with css .pika-imgnav a.next{display: block!important;} it doesn’t work… Any idea?
It’s possible with a bit of js. Change how you call pikachoose to be:
var preventStageHoverEffect = function(self){self.wrap.unbind('mouseenter.pikachoose').unbind('mouseleave.pikachoose');
};
$("#pikame").PikaChoose({bindsFinished: preventStageHoverEffect});
You should add this as an option.
Hello.
Thx for this great carousel.
But, i’ve an issue.
When i click on a thumbnail, the carousel turns in pause and doesn’t continue.
How could i fix it ?
i want to be able to click on a thumbnail and after 5 secondes (for example) it plays next picture.
Thank you !
This isn’t possible right now, but I get this request enough now to put it in. I’ll try to whip something up this week that will let you keep the slideshow playing.
May i use you slide for Video?
I’m afraid not. PikaChoose is only for images.
Hi, love this plugin! I’m a noob (but I got it installed and it’s working marvelously with dynamic data) but I’m having some issues:
1. Caption on large image disappears after first image
2. Absolutely no prev/next capability (either text or image).
3. As mentioned above, when i use ‘text: {previous: “Previous”, next: “Next” }’, the whole things stands still.
I too had the issue of the images getting larger and larger with each transition, but your max width/height tip did the trick-thank you for that!
I’m in a bit of an urgent rush, so a quick reply would be VERY much appreciated.
Thanks!
I shot you an email. Let me know if you need any more assistance.
Thanks for the plugin man. Working well thus far but I’ve encountered two problems. What’s the width/height max tip because i’m having the same problem and the previous and next arrows are not appearing.
hey ur form is not looking good in Firefox Mozilla 3.6
some sort of CSS issues ..
well the site is good…thanks for all the work
You sure it was 3.6? The current version is like 9.x now isn’t it?
I do not want to stop the images change when I click the next photo. How do?
I’m not getting thumbnails. How do I activate them?
They should show by default. You have a url I could see this at?
How do you get rid of the “previous next”?
$(“#pikame”).PikaChoose({
text: {previous: “”, next: “” },
});
Should do the trick
For some weird reason, using the text: {previous:”", next: “” }, actually stops the plugin from working. Crazy as I’ve also tried switching to ticks ” ‘ ” to no avail as well. Any other ideas?
Figured out the best way to do it. Modify the CSS to add a “display:none;” to the .pika-textnav class.
Excellent, as I wanted to remove the navigation and the counter I added this:
.pika-textnav, .pika-counter
{
display: none;
}
Try to add :
display:none!important;
in this line in the base css file:
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;display:none!important;}
woops, sorry, misunderstood your Q.
I’m having some issue while using carousel – counter isn’t working well. Basicly when i use 6 pictures and carousel gets near 6th one, total counter increments (so it goes 3/6, 4/7, 5/8….) instead of stayed 6 and current went back to 1 after 6th.
Any idea how to fix that?
Found out that this is general issue with jCarousel while with circullar wrap option.
Still – maybe someone got solution? Or can i just turn that counter off?
I haven’t found a way to fix this just yet. But I am aware of the issue.
Fixed in the new version. Sorry about the delay.
Hi!
Thanks for this great Gallery – finally a good one.
Everything works fine – one Question I still have:
How can I change the “crop” Funktion how the thumbnails get edited? I want them to get more croped…
Do you know what I mean?
Greets
Martin
Not sure I’m following you. You can change the CSS to make the images smaller or narrower.
I use live function with pikachoose and it won’t show up in Internet Explorer
$(“.galeriaload”).live(‘click’, function(){
$(‘#contenido’).load($(this).data(‘url’),function(){
var a = function(self){
self.anchor.fancybox();
};
$(“#pikame”).PikaChoose();
return false;
});
});
sorry, I meant
$(“.galeriaload”).live(‘click’, function(){
$(‘#contenido’).load($(this).data(‘url’),function(){
var a = function(self){
self.anchor.fancybox();
};
$(“#pikame”).PikaChoose({buildFinished:a});
return false;
});
});
Do you have a url I could see this at?
It has been fixed, thanks.
There was an unneeded at the end of the called file and it was causing the script to not to load in IE
Anyway to always show previous & next buttons?
Removing .fadeTo(‘slow’, 0.0) on line 332 did the trick!
Nice plugin.
developer has to change few things.
Hi there, is there a way of triggering the thumbnail image to become the main image on mouseover / mouse hover rather than having to click the thumbnail image. Like the way it works on Amazon?
Got it working… obviously use thumbChangeEvent:’mouseover.pikachoose’ but also make sure you are using the full js file jquery.pikachoose.full.js and not jquery.pikachoose.js
Any reason you needed to use the full version?
When using both the carousel and a datasource (passing in an array via “data:”) the carousel seems to ignore the styles specified in a stylesheet (e.g. “.jcarousel-skin-pika .jcarousel-container-horizontal”, etc.).
Is there anything that needs to be done differently to get the carousel to use specified styles when passing in a datasource or is this a bug/by design?
Thanks.
I hadn’t thought of that before. What you could do is remove the .jcarousel-skin-pika from the styles and it should work, but it’ll bump into any other jCarousels you might have the page (no worries if you don’t have any).
Yep – that does the trick nicely (no other carousels on the page). Thanks for the quick reply.
Very nice work by the way – a great plugin.
Why do I get the error “Pause’ of undefined”
my js
@
function (){
$(“#pikame”).PikaChoose();
$(‘#stop’).data(‘pikachoose’).Pause();
$(‘#start’).data(‘pikachoose’).Play();
}
@
Hey Pavel, I think you want to do something like this:
$(“#stop”).bind(‘click’,function(){
$(“#pikame”).data(‘pikachoose’).Pause();
});
You have to reference the ul to get the PikaChoose object back. The above code should work out.
Your comment section is breaking…Put float:left in style.css line number 277
What a great site! i really enjoyed reading your very informative articles. I will be coming back for more soon.
Desde que utlizamos en nuestro proyectos pikachoose, los slider van genial en todas nuestro diseño web
I’m using Pikachoose in the Gallery section (when you click the images, you’ll be led there). It works fine in IE, Google Chrome, and Safari, but not in Firefox?
Hi, love the design of this gallery. Currently have it working in firefox and chrome, but for some reason it won’t work for me in IE. Any ideas?
Any help is much appreciated.
Regards,
Matt
Nevermind. Still not sure what it was, but pasted back in from the demo and it is now working.
Hey Jeremy, First of all thanks alot for such a great plugin.
I need to know that how can i make carousel to work. I downloaded your examples and used “bottom with carousel” file. I dont see any control for moving carousel left or right. How would i move carousel left or right.?
Best Regards and thanks again.
Great plugin, but have same issue as dabndy: no left-right (or up-down_ control for carousel.
Both of those controls are there but hidden. You’ll want to add some styles to .jacarousel-next and .jcarousel-prev
Hi,
When using big images with different sizes, some of the transitions are not working properly. For example on transition 6, the new active images is rendered with original size. It only renders correctly when the transition finishes.
How can I fix this?
Can you grab the newest version (4.4.2) and see if that helps. I’ve made some adjustments recently. If that doesn’t work shoot me a url with an example and I’ll take a look.
Hi, Is there any option where the slide should go on auto-playing after clicking a thumbnail?
Not sure I follow you on this one. Could you elaborate?
I mean the slide does not resume auto play after clicking on a thumbnail. –I’m suggesting something like autoplayLocked function of anythingSlider, where the show still goes on after any click event. Too bad that one doesn’t have crossfade transition.
That’s a good suggestion. I’ll look at adding it in come the next release.
Hi, I am currently facing a problem with the jQuery. If the image that I am going to show is very long in width, but very short in height, it will still display the picture, however the image was not resized to fit nicely inside the box showing the image clicked on. Instead the image expanded out from width of the box.
Is there a way to resize the width of image to only fit inside the box? I dont mind the image being smaller. I just want it to fit in the box similarly to the others.
Try setting the .pika-stage img from height: 100% to max-height:100%; max-width: 100%; and see how that works out for you.
Hey everyone! I’ve cleared out the comments for the pages with the new redesign. If you want to browse through the old site you’re free to check it out here: http://old.pikachoose.com