homeHome about meAbout Me contactContact Me portfolioPortfolio musicResume

PikaChoose! Gallery


Advertisement

We’ve Moved! Follow the link below and then update your bookmarks.

Visit our new site at PikaChoose.com.

Description

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 also comes packaged with SliderJS. Alot of people have been asking me for a carousel for PikaChoose, and SliderJS will fulfill your needs! Instructions are included in how to add SliderJS onto your slideshow, but its easy enough to figure out just by peeking at the source code in the included example. I’m positive you’ll choose PikaChoose as your javascript image gallery!

Recent Versions

Demo

Try the demo below, or for full size flash like goodness try the full screen image gallery!

Setup

Setup is straight forward and easy, and now with version 2 it’s even simpler. Ready for the easy peasy of it? Make a list and run the PikaChoose function on it. You may need to change a couple options to suit your needs, or maybe not. Below is an example with all the options set to the defaults (so if you like what you see here you can opt to not set any of the options). I’ve also included the configuration for SliderJS.

Javascript (click to view)

	
  function (){
     $("#pikame").PikaChoose({
			show_captions: true,
			slide_enabled: true,
			auto_play: true,
			show_prev_next: true,
			slide_speed: 1000,
			thumb_width: 50,
			thumb_height: 45
  });
     $("#pikame").SliderJS({
			list_width: 3500,
			window_width: 500,
			window_height: 50
  });
	

Change Log

  • 2.3- Fixed bugs related to sliderjs. Now works correctly in all browsers except IE. In IE PikaChoose and SliderJS work, but the flick and toss functionality is limited to the spaces between images (still auto scrolls). Shouldn’t affect usability too much.
  • 2.2.1 - Fixed a bug where thumbnails would not resize on initial page load and failed to resize at all in Safari.
  • 2.2 - Images now load on their own instead of waiting for the site to finish loading. This should improve performance with sites that have large pages.
  • 2.1 - Images can now contain links. The link url should be put in an attribute title ref
  • 2.0.1 - Fixed a bug where Safari would not resize the thumbnails. Improved the smoothness of loading images.
  • 2.0 - Rehauled PikaChoose to be easier to implement.
  • 1.0.1 - Fixed bug that was preventing the auto play feature from working

FAQ

Is it free?
Yes. Pikachoose is free for personal use under the GNU GPL. If you find PikaChoose to be helpful please consider donating.
Can I have multiple slideshows on one page?
Pikachoose supports multiple galleries on one page, however, if you have multiple galleries on the same page you’ll need to turn off the slideshow feature by setting $pika_slide=false; in your setup.
Are there any requirements to running PikaChoose?
PikaChoose require Jquery to be present on your site. Just make sure the PikaChoose include comes after the jquery include.
Hey I’ve made PikaChoose better! Wanna see?
Yes I do! I am by no means the best JS programmer out there, if you have tips or improvements for PikaChoose let me know. Just send me a email using the contact from on Jeremy-Fry.com.

Tags: , ,
Posted on Friday, November 21st, 2008. Category: PikaChoose Responses are currently closed, but you can trackback from your own site.


32 Responses to “PikaChoose! Gallery”
  • Wondering why your first image doesn’t appear until you click on a thumbnail in IE7…haven’t checked if it does the same thing in IE6. I would like to use your gallery but need it to load the first picture without having to select a thumbnail first.

    Thanks,

    Aaron

  • Aaron,

    Thanks for the update. I’ll look into this and hopefully have a fix for the bug within a day or two. Check back!

  • Hi jeremy

    Can you say me how can i transform the thumbs to only a simple link like img1 img2 img3 etc…

    thanks for your help

    ps : sorry for my bad english
    Regards

  • Unfortunately there is no way to do that. There is two reasons for this.

    1. The pictures are loaded by reading the src of the thumbnails.

    2. If the user doesn’t have Javascript the plugin degrades into a list of images which are still easily viewable. Text links wouldn’t allow this.

    Sorry this doesn’t work for you. Maybe try Lightbox as an alternative.

  • Hey Jeremy just wondering if you have happened to figure out the issue with the image not loading in IE until you click on a thumbnail.

    Thanks,

    Aaron

  • Hi I have the same problem that Aaron does, with IE. What I ended up doing was giving an id like “image1″ to the first image and then adding this to the js

    $(document).ready(function () {
    $(”#image1″).trigger(”click”,["auto"]);
    });

  • Ok an update I changed the following code:

    //this loads the first image when we load the page
    /*$(”.pikachoose”).each(function(){
    $(this).children(’li:first’).children(’IMG’).trigger(”click”,["auto"]);
    });*/

    to this :

    $(document).ready(function () {
    $(”.pikachoose”).each(function(){
    $(this).children(’li:first’).children(’IMG’).trigger(”click”,["auto"]);
    });
    });

    and it worked without having to place id’s on your images.

  • Fabian,

    That’s a good fix. It’s what I had in mind. The reason for this bug has something to do with a little bit of code that stops the queuing of images to build up if the user clicks images very quickly. I’m working re writing Pikachoose to be a little easier to implement and hope this bug will disappear then.

    I’ll make a post when it’s done, but for now that is a great fix.

    Thanks!

  • Jeremy,

    No thank you for creating this cool looking gallery.

    Can’t wait for the new Pikachoose although I find that it’s very easy to implement compared to yui’s gallerys and galleria 1.0b. And since you’re at it , it would be nice to have a slider function like in the yui gallery.

    http://billwscott.com/carousel/carousel_spotlight.html

    I gonna try to implement it myself and if I succeed I’ll post it here.

    Cheers,
    Fabian

  • Hi.

    I’ve just used PikaChoose! to create a small gallery on a demo site I’ve designed. http://www.selavyhobart.com .

    I really like the simplicity of the implementation.

    One thing I would like greater understanding of is the FadeIn and FadeOut variables in the script. Using PikaChoose! with FireFox 3.04 (OS X) causes a jerky jump in the fading from one full sized image to another. Any additional information (more script comments?) would be greatly appreciated.

    Thanks,

    Forrest

  • Forrest,

    Hey I just checked it out on your site. Works fine on my end. The only thing I can think of is that the test machine you were on is a little underpowered. Fading large images can be a little intensive.

  • Hello Jeremy,

    Really nice gallery I am using it for an architecture minimalist page here: http://www.trompix.com/fcb

    I do seem to have an issue with the thumbnails, the first time the page loads the thumbs are not re sized so they look like a crop of the original image (top left corner of the image) after that first load, if you refresh the page the thumbs are re sized correctly.

    Also it would be great to implement a slider function to be able to display say 30 images in sets of x size.

    Great work congratulations and thanks for posting it for free.

  • Rodolfo,

    Thanks for letting me know you’re using it. I had a suggestion that I’ve emailed to you to make PikaChoose work a little better for you.

    I’m aware of the bug where the images don’t resize on the first load (this also seems to affect Safari all the time). I’ll be sure to let you know when I get this fixed. Hopefully within the next day or two.

  • Well I had a delicious lunch and that gave me some needed motivation. I’ve made an update to PikaChoose to remedy the thumbnail problem. Sorry for the bugs!

  • great! thnx u!

  • Wouldn’t you know it…IE hits me again! I have your beautiful gallery working very nicely ((THANK YOU!!)) in FF, but it gets completely detonated in IE7.

    If I post the site I’m working on, would you mind taking a peek at it? I’d really love to continue using it as it’s the best auto-scrolling gallery I’ve seen thus far.

    Thank you in advance!
    jm

  • Jeremy, this thing doesn’t work in IE.

    Has anyone else discovered the problem (and solution)???

    Thanks.

  • Jason,

    Sorry about taking so long. Been a busy holiday. Everything should be working fine in IE again with version 2.3.

    Thanks!

  • Jeremy,
    Frist of all thank you for this great plugin.
    I would like to use the gallery without any sort of navigation on some pages with auto-play feature.
    Is it possible to turn off the thumbnail navigation. I have played with changing the stylesheet for “ul#pikame” but with no success.

    Thank you in advance.

  • Navid,

    Did you try setting ul#pikame{display: none;}
    This should work, though it may leave a gap, in which case you should also set your thumb height to be 1 (0 may work, but I can’t test it right now).

    Try
    $(”#pikame”).PikaChoose({
    auto_play: true,
    show_prev_next: false,
    thumb_height: 1
    });

    Hope it works for you.

  • hi there, lovely script for neophytes like myself. have it going on this site but the slideshow isn’t playing and for the life of me can’t figure out why. any assistance greatly appreciated.
    have this in my ‘head’..

    and have enabled slide_enabled: true, auto_play: true,
    - trying o keep it simple and without thumbnails..

    cheers,
    mm

  • forgot to include the link..
    http://ergwork.com/
    (or http://ergwork.blogspot.com/)

  • erGman,

    A couple things I might suggest, but I’m not entirely sure it will work.

    First move the chunk of script where you call pikachoose below where you include the pikachoose.js file.

    Second try removing the code that prevents right clicking. It’s handling seems a little sloppy and may be capturing all clicks. (I won’t lecture you on why disabling right click is bad, but if someone want your images they’ll just left click and drag them to their desktop)

    If all else fails let me know.

  • thanks jeremy,

    i cleaned things up and removed the r-click code (i was previously ill-advised to add it and actually forgot it was there) and repositioned the pikachoose call up. but the bad news, it’s still not playing. weird.

    mm

  • Hi there i’m using your gallery and must admit it solved me great time but i have a little issue i don’t know if is common. That is that the browser shows only 21 pics of the 61 i intend to show, it slides all the way thru to the 21 picture and then goes back…

    Any help?

  • Budaya do you have a url?

  • Hi Jeremy, thanks a lot for making this great lightweight plugin.

    I’ve just noticed a little bug you can fix easily. Previous link is going to next image. The code is the same used by the next image function.

    Thanks again!

  • thank you it’s work great with me
    thank you

  • Hi Jeremy, I like the gallery a lot. I’m wondering if there is a way make thumbnails from other images though? Thanks.

  • I tried to download the ZIP files but I couldn’t. The links don’t work.

  • Is there a way to use Pikachoose with jQuery.noconflict()? I’d really like to use it but also need Prototype.

  • I’m closing comments on this page now. Please go to http://www.pikachoose.com/demo for all further comments. Thanks.