Demo
Version 3 of PikaChoose jQuery Image Gallery is now available! More stable, less bugs, and cross fading! Pikachoose is a lightweight Jquery Image Gallery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.
Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an javascript image gallery shouldn’t be a complex thing.
PikaChoose survives on your donations. Support us by visiting sponsors or advertising on PikaChoose.com. Only $12/mo!
Links are supported in captions!
Or any other html you wish to include.
Images curtosy of detroitDerek
Use custom image or let PikaChoose create thumbs for you.
Coding should be simple. There is no gallery easier to use than Piakchoose!
I’d be happy to link to your site on the homepage. Just contact me.
Check out the documentation for all the settings you can edit.
Advertise on PikaChoose just click a greay box in the right rail.
Need PikaChoose customized? Contact me for rates.
Thanks for using PikaChoose!
This example and images are available in the download section. I’d love to hear if you’re using PikaChoose! Please leave me a comment below!
lp says:
in xhtml 1.0 transitional doctype the auto_play:true didn’t work bug free for me in firefox.
solved the even images jump bug with the following timeout in the html file:
$(document).ready(function (){
$(”#pikame”).PikaChoose();
setTimeout(’$(”.pika_play_button”).trigger(”click”)’,5000);
});
basically, the plugin starts with auto_play: false, and 5 seconds after it emulates a click in the play button.
jed says:
Hi,
Can you elaborate on your solution? When I added the ’setTimeout’ line, it broke my gallery.
drooh says:
I downloaded the demo and unzipped to my server but it seems that the “play.png” button does not show up?
By default the slideshow is not set to autoplay. And when you hover over you can see the pause button, it should be a play button 1st. In any case if you click the pause button it starts to autoplay but it never changed to a play button.
Jesse says:
I changed line 20 of style.css from “.pika_play a” to “.pika_play a.pika_stop_button”, as line 20 mirrors line 19 except the image is “pause.png” instead of “play.png”. This fixes the play/pause button issue.
Dave says:
Very nice! Well done!
It would be nice to add:
1) Ability to hide the thumbnails! Many flash slideshows don’t have them and only have either auto-play or prev/next
2) Ability to turn off the pause button
Dave says:
I figured out #1. Just set the height to zero in the style.css for this element: pikachoose ul
This resolves #2. There seems to be a bug that when you click on the pause button, it stays a pause button (even though it actually pauses)
vinicius says:
At times when we open in the IE thunbs not appear if we click on page F5 of demos that also occurs. Any solution?
DailyBread says:
I see that in every pikachoose gallery the thumbs do a little jump while loading..
how can I change this?
help!
Daniel Hoviss says:
In the style sheet there is a commented place to make that adjustment.
Daniel Hoviss says:
Would be nice to have opacity options as one of the var defaults.
IFulgar says:
Great work! Easy to integrate into any page. Thank you!
On bugz:
1. Play-Pause buttons not working - change css to these: .pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a.pika_play_button{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url(’/assets/images/play.png’) top center no-repeat;}
.pika_play a.pika_stop_button{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url(’/assets/images/pause.png’) top center no-repeat;}
2. Layout breaks when navigated from another link. Specially if pikachoose page was previously viewed. But layout fixes itself on hard manual refreshing of page. Anyone has the same experience?
Nick Toye says:
Are we able to have Div’s with images and text as the show/hide content?
Brian says:
ifulgar,
Thanks for the play-pause bug fix.
Andrew says:
Hey great slideshow, best one I’ve come across so far and i’ve been looking at a lot!
Would be cool to see this with a slider implemented? How would one go about doing this? I saw something about slider.js but I think it’s a bit old now.
Silvio says:
Any bugfix for the autoplay problem? (skips images…)
(expect the solution from user LP)
Eric says:
I am coming across the same issue. The First image will show. Second image thumbnail will be active, but will not show. Third image thumbnail and image will show. What’s up with that? All on “autoplay=true”
Aaron Clausen says:
Hi there,
Fantastic plugin!
There is a small incompatibility with the latest jQuery (1.4.1). The thumbnails don’t become greyed out (opaque) etc. They all simply look full colour and so there is no difference between the active thumbnail and the other ones. This only happens in Firefox from what I can tell, but is fine in jQuery 1.3.2
Cheers.
Aaron Clausen says:
Hi there,
Just wondering if you are still working on this and/or supporting it?
My question is the same as some guy’s on the 3rd page of comments..
I am using pikachoose in conjunction with pirobox (similar to lightbox), so I have links inside my pikachoose SPAN captions. These links simply have a class which makes pirobox identify them and activate them to launch pirobox.
But it doesn’t work. Both pikechoose and pirobox work perfectly fine independent of each other, but they don’t work together. The pirobox window can’t be launched from links inside the pirobox spans.
So I hacked the pikachoose source a little to make it use DIVs inside the captions, instead of SPANs, but that didn’t make a difference. So I’ve gone back to the default SPANs now.
Pirobox can however, be launched from a static hyperlink that is placed outside of the pikachoose area, then it works fine, But I really want to launch pirebox from a link within my pikachoose captions!
Any suggestions or tips to point me in the right direction of how your code works? I am using Firefox/Firebug to try to see what’s going on.
Thx a lot
Aaron.
Aaron Clausen says:
Hi again,
I’ve narrowed it down a little more. Obvious you might say, but these pirobox links are only having this problem when places inside the pikachoose SPAN captions.
I can place a pirobox link anywhere else inside the pikachoose UL or DIVs etc and pirobox launches no problems at all.
So pikachoose must be doing some kind of unusual processing to whatever is inside the captions, to prevent pirobox from firing from within there.
Still debugging further..
Thx
Aaron.
SimonJPA says:
Good Morning,
I just unziped the folder on my computer.
The line of code that LP added, you have to put it after those lines:
$(document).ready(
function (){
$(”#pikame”).PikaChoose();
So it become this:
$(document).ready(
function (){
$(”#pikame”).PikaChoose();
setTimeout(’$(”.pika_play_button”).trigger(”click”)’,10000);
});
I’m a Canadian that live in Brazil, here everybody speaks Portuguese.
I tryied to change the buttons_text to have the navigation in Portuguese:
buttons_text: { play: “”, stop: “”, previous: “Anterior”, next: “Próximo” },
It didn’t work. I had to go inside the file pikachoose-min.js and change by hand the buttons_text.
Even they were some errors. It’s just what I needed.
When the website will be online, can I send you the link to put on the first page on your website?
Regards,
Can’t wait to see what a new version.
SimonJPA says:
Good Morning,
I just unziped the folder on my computer.
The line of code that LP added, you have to put it after those lines:
$(document).ready(
function (){
$(”#pikame”).PikaChoose();
So it become this:
$(document).ready(
function (){
$(”#pikame”).PikaChoose();
setTimeout(’$(”.pika_play_button”).trigger(”click”)’,10000);
});
alvinthethird says:
I love this gallery - question: How can I make it work with IE 7, it works with IE 8 just fine, but nothing comes up in 7.
Suggestions?
Suthan says:
nice one boss
pacomermela says:
nice place man!
Carlos Drummond de Andrade says:
Ronaldo!