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
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 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?
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!