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!
How to change the PikaChoose Image effect fadein-out to slide left
Hi,
When I click on any of the images the script redirects me to the link in the li:
This is an example of the basic theme.
Any help would be much appreciated.
The images seem to be loaded in off-center, and then after the transition they are properly centered. Any ideas?
Hey Jeremy. I’m trying to get the slider to pause on hover then continue on mouseout but I’m new with jQuery. Can you help out?
I’m sure everyone already figured this out but the code on the options page is a little different than the example code in the downloads. I got the hover to work:
$(“.pikachoose”).hover(function() {
$(“#pikachoose”).data(“pikachoose”).Pause();
}, function() {
$(“#pikachoose”).data(“pikachoose”).Play();
});
Sorry about that Ben. There’s actually an option called hoverPause that will accomplish this. You can use $(“#id”).pikachoose({hoverPause:true}); to activate it. I’ve updated the docs since I seemed to have overlooked this previously.
Hello,
I really liked your plugin. But I have a doubt.
How do I get text instead of thumbnails?
Hello! Great slider! I have two questions:
-Can I add a ALT on the image of the slider ?
-Is it possible to have the caption appears in sync with the image? Actually the caption fade-in after the image finished to fade-in…
Thanks!
I’ll look at making sure alt text is preserved when creating the gallery. The caption can’t be faded in at the same time at this since it’s updated in the clean-up stages of the animation. Sorry.
Ok no problem for the caption… If you can check for The alt, would be great… Thanks! Your slider is great and your support also!
Hi, Very nice stuff! But I am getting a problem. On clicking thumbnail slideshow shows right images but never moves on next image. Could you please let me know what is the solution for this?
Thanks,
Kiran
Do you have a url I could look at?
I’m in the process of building my site after deciding to take advantage of becoming unemployed to begin freelancing, so I can’t afford to donate, but I do want to say thanks for this. It’s 10x easier than the PHP options I have been messing with and I will denfinitely send a donation for it as soon as I can.
Does anyone know how to prevent the resizing of the main image on the stage? I would like to use this so that images load in different sizes (the original size of the photo). I just built a site using this for an artist and my client is freaking out because the images are now blurry. Yikes!
Remove the .pika-stage img{ height: 100%; } from the css.
Thank you so much for the code, best photo gallery and javascript coding ever. It is absolutely amazing. Thank You, Thank You, Thank You.
Jeremy, Hi, first, great job. 1 Question – Is there any way to turn off the automatic resizing of the large images? I have many images, all the same height, but varying widths. Right now, pikachoose is scaling the images to the width of the large image container, is there any way to shut that off, or at least tell me where it gets done, so I can mod the JS myself? Thanks.
Should all be in the css file. I try to avoid resizing anything in the javascript outside of the thumbnails.
Thanks but cannot find a way to modify the caption. Am trying to stretch it wider and drop it right to the bottom.
Is this possible?
Would be happy to contribute if I can get this to work.
Thanks.
All the caption styles are defined in the css file.
Hello,
AMAZING script. Thank you so much for your work.
I’m sorry if this is a dumb question, but by any chance can the thumbnails go above?
Thanks
Congratulations for the great work.
I tested the version with bottom-IE9 carousel and the next and previous buttons do not disappear and play and pause buttons are not displayed.
Sorry to bother you again, but I cannot get Fancybox to activatte properly. It keeps bringing up the 1st test image at the bottom of the page, and never switches it to the 2nd image. You can see the work-up page at:
http://danirvine.me/test/test2.html
Thanks so much for the help. I have been looking for weeks for a gallery program that can nest a lightbox and nobody seems to have one.
Make sure that you fancybox css is being pulled in and that your jquery is updated to the current version.
Thanks so much for the reply. I have, I think attached it properly:
but I’ve noted that Pikachoose, itself, it pretty picky about where the stylesheet is (when it gets put in the normal location below the scripts, it doesn’t work). Could there be a conflict between stylesheets or carousel?
On the fancybox website, they mention needing a ‘rel’ anchor.
Is there an example html page (other than this one) that shows the setup? This one is harder with the dynamic scripts to understand.
SORRY, just found the answer!
Do you have an example of how to call user thumbnails anywhere? I am putting together a site with a lot of vertical and horizontal images and the auto-cropper is not handling the wide ones very well.
Hope this works!! Will be happy to send a gratuity if I can get it working.
Adam :0)
How can I set the thumbs to number themselves? 5 images 5 thumbs numbered 1-5
thought of an easy way to solve this. make thumbnail images with numbers.
Hy Jeremy!
First of all thanks for that great work you did …
… but I have a little problem.
I use “Clean & Classic Theme” but the images are not resized to the stage, they will shown full format. the preview image line would stay on its position but the navigation bar is moving to the bottom of the image. what do I wrong?
The main image should get scaled to the stage. Try giving .pika-stage img a max-height of 100%
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 I would like to thank you for this awesome jQuery script! I’m having a problem with the issue of the main image jumping please see http://persnickety.oxzen.com/bella-dress.html, I tried so hard on fixing it but I had no luck, I hope you could help.
Thanks,
Marco
Give the ani-wrap div a top position of 0 instead of 10 (line 14 of bottom.css). And I’m going to have to keep my wife away from your site. Super cute stuff and we have a little girl! Ha!
Thank you! that’s solve the problem, but can you please check again? Looks like the image on top is reappearing fast on top of the new image.
The site will be live anytime soon! Check out soon! ahah!
those mellow transition are amazing!
hey, thanks for your plugin!
however it is impossible for me that the thumbnails don’t look streched or just taking some random slice that contains no important visual information (such as white ceiling from the top of the image). I tried changing width and height to the thumnails .css but nothing… any tip, please? i wouldn’t mind using my own thumbnails but i don’t know how to do it!
thanks in advanced for your help!!!
I FOUND IT, now i put my own thumbnails.
thank you again for your gallery, looks very nice.
THis wan’t work,is it a bug?
el = document.createElement(“div”);
el.setAttribute(“class”, “window”);
el.setAttribute(“title”, “Gallery”);
document.getElementById(“galleryBox”).appendChild(el);
$(el).append(“a”);//works
$(el).PikaChoose({ carousel: true, autoPlay: false, data: path);
Sorry,i spend all day thinking about this problem.
Problem was in global scope of “el”..I declared it in other function too.
Hi,
I use the css3 Version. Is there any way to appear the thumbs on the top, above the images? I need an answer, please
Greetings from Germany
Working great so far! Though I’m trying to use it multiple times on one page, and only the top one seems to work properly—the second one just has the large images appear one on top of the other with no thumbnails. Is there something preventing it from being used multiple times on the same page?
There shouldn’t be. Is there a url I can take a look at?
A work in progress. Thanks for your help!
http://jeffsoyk.com/portfolio/web.html
Hello. Just following up to see if you had any thoughts on this. Thanks!
Hi Jeremy
How do you control the width height of two different sliders ont he same page?
I guess its controlled by the containing div not the pika-stage class…
This is a great gallery solution!
How can I add more style attributes to the active state of the thumbnails? Say I wanted to add a border in addition to the opacity, or an additional background image?
Thanks.
The active image and the li that contains it both get an .active class. You can apply styles using that.
That did it, thank you!
I don’t understand why it’s only showing my first 2 images, instead of all 4 I linked in the code. And the fade effect looks awful on mine.
It looks like your jQuery is out of date. Try grabbing the newest jquery and see if that helps.
You can certainly see your enthusiasm in the work you write. The arena hopes for more passionate writers like you who aren’t afraid to mention how they believe. All the time go after your heart.
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. I Really Need help because I having a hard figuring out why it’s doing that. Thanks
There shouldn’t be any max to the width or height, do you have a url I can check out?
thank you so much for your plug in!
can you help me with this please?
i need to know how i can use this plugin but enter its images dynamically, from the code behind
this is what i meen:
asp:DataList ID=”lstThumbs”
img id=”imgbtnThumb” src=%# Container.DataItem %
Try looping through your data set and building out the html for a list. Then PikaChoose should be able to parse it.
This is pretty easy. Here is a code example. Im using a data repeater but the concept is the same:
Im using an ASP:Repeater with a sql data source but the concept is the same.
In the item template write out:
Well I cant post code evidently.
Thanks so much for this…
all the galleries I tried got mixed up with my CSS and didnt work cleanly. This one just went on and worked first time
Awesome! Happy to hear that it worked out easily for you!