Galleriffic 1.0

By | February 3, 2009

*************************************************************

Update: Galleriffic 2.0 has been released. Read about it here.

*************************************************************

At long last, I have released the 1.0 version of Galleriffic, which packs all sorts of new features.

For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth. h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.

New Features

  • Updated to work with jQuery 1.3 (apparently jQuery 1.3.2 introduces a flicker the gallery advances)
  • OnTransitionIn and OnTransitionOut events that allow for plugging in custom transitions
  • SlideShow auto start option
  • Disable history and url hash writing option
  • Support for showing an element (such as an animated loading image) when waiting for an image to load
  • Thumbnails are now simply shown/hidden instead of being rebuilt which allows for any custom html to be used as a thumbnail
  • Replaced invalid html attributes “description” and “original” with an optional caption element that can contain any custom html
  • Changed the toggle slideshow span to a hyperlink

By exposing both image and page transition events, the doors of creativity are now open for plugging in your own image transitions.  This should also lend to a more modular approach for extending Galleriffic.

FAQ

Will Galleriffic generate the slide and thumbnail images automatically?

I have been asked a lot if Galleriffic automatically generates the thumbnails and slides.

Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum.  I have created a jAlbum skin that I use myself for creating my personal galleries.  After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click “Make Album”, and wallah, you now have a complete html gallery with 3 different size versions of each image.

How can I center the slide image?

Thanks to Cristi for providing a solution to this problem. Click here to read her solution.

How can I change the number of thumbnail columns?

With the stylesheet used in the example, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. I am currently setting its width using javascript with the following line in the html:

document.write(<!-- div.navigation{width:300px;float: left;}div.content{display:block;} -->
 
”);

It has been pointed out in the comments that a better way to do this is to use the jQuery.css() method just before initializing the gallery.

Where do I submit my issues or enhancement requests?

I started an issues list that I will start working off of for future releases here. Submit your issues and enhancement requests in this list.

427 thoughts on “Galleriffic 1.0

  1. yanive

    Hi,
    I love your script, the problem is that I’m using in my site with ajax to implement
    the inner pages content, and when i call the gallery page where
    i put the list of my images that gallery doesn’t work.
    It’s like you have to put the gallery list hardcore. to make it work

  2. Trent Post author

    @yanine just make sure that you don’t initialize the gallery until after the inner page content has loaded. You will need to initialize Galleriffic in the callback function of your AJAX load method responsible for retrieving the inner page content.

  3. Trent Post author

    @John K For the moment, you will need to widen the page width and slideshow container width in the stylesheet to accommodate the larger image sizes. I am midway through the next release of the jAlbum skin which will automatically correct the page width problem.

  4. Matt

    What’s a easy way to display # of ## Slides, where # – current and ## is total images.

    I tried currentIndex and index in the onChange function, but it’s all undefined.

  5. arno

    hi Trent,
    I try to use galleriffic. I have problems with the generation of the urls. I use Typo3 an the extension realurl. For this extension it is necessary to set the baseurl-Tag an the head-tag. And this tag is the problem.
    Galleriffic changes the correct link from the image to href=”#0″. The browser read the baseurl and so I get a wrong link, like http://www.mysite.de/#0 -> gallerific don`t work, because the browser jumps to the startsite.
    Is it possible for gallerific to generate the hole link, like http://www.mysite.de/subsite.html#0? If is true, how?

  6. T.Jung

    Hallo,

    I’ve got a problem in IE 6 + 7 (in Firefox and Safari, everything’s fine):
    When I start a slideshow, on each image reload the page jumps up to somewhere near the top.

    Any idea what might be causing this?

    The gallery has been integrated on a quite old site which is using tables for layout (and the full gallery is in one of those ‘s).
    I know that’s bad but the client wouldn’t pay a full rewrite using clean css layout.
    Could it be that this is disturbing Galleriffic?

    Regards,
    T. Jung

  7. T.Jung

    Ooops, trying to type an HTML tag messed up my posting:
    »and the full gallery is in one of those ’s« should read:
    »and the full gallery is in one of those table cells«.

  8. T.Jung

    I’ve narrowed down the problem a bit:
    – Tables are NOT responsible.
    – The document was rendered in quirks mode. :-/
    After putting it to standards compliance mode, the problem is solved for IE7 but not for IE 6.

  9. Dave

    Great gallery. I’m also having issues getting the gallery to work when inside a jQuery fancybox. Exactly as described above, works outside of fancybox fine but when inside I need to refresh the page for the main image to change. Has anyone found a solution for this?

    Thanks,

    Dave

  10. Denis

    Hi trent

    Great work. I noticed on your pics (some of yr wedding pics) and mine there are white spots/specs thru the image. Are you aware of this? The image on its own does not have the white specs but when run thru galleric it shows up.

    Is it possible to place the navigation on the top or bottom to cater for panaramic shots. I noticed it works for right or left.

    cheers
    Denis/australia

  11. Denis

    Ooops, sry just noticed to place suggestions in list, aplogies, denis

  12. kmcb

    Hi,

    Galleriffic has worked great, thanks..

    I’m trying to pull out the image information during the OnTransitionIn event, to populate tinymce with description, path, and title. Can you help me out? I have not figured out the right combination.

    thanks
    kmcb

  13. Debbie

    This is a great little script – I’m using it for a small typography gallery here:

    http://www.redkitecreative.com/projects/kontour/typefaces_drawlogy.html

    I have two questions – first, I’d like to have a different hover/focus image (a red version of the same thumbnail) for the current thumbnail. Can you point me in a direction to make the necessary modifications?

    Second, under the PRE | NEXT controls, is there any way to make a counter that would show for example ‘1 | 26′ for the first image, ‘2 | 26′ for the second, etc.?

  14. Ideias Simples

    This is a great plugin. Simple and very useful.

    I was having a problem with the width of images, it would not fit on my page. The images are on another server and I cannot change the size of images, also I didn’t want to change the size of the layout, just because of the gallery.

    I tried using the onChange event and put a new Image size there, but didn’t work as (I think) it was rendering the image twice, and the second time occurs after the onChange event. On the first rendering it was the size I specified, and then on the second it was returning to the normal size.

    So until you fix that I made a small change in the code, I added a setting “imageMaxWidth: 0″ and on the “:buildImage” I added:

    //Resize Image
    if (this.settings.imageMaxWidth > 0 && image.width > this.settings.imageMaxWidth){
    image.width = this.settings.imageMaxWidth;
    }

    I am no expert in Javascript but I think it does the trick, hope you don’t mind but I really needed that change in the code.

    Thanks a lot!!!

  15. Inah

    Hi! I’m trying to use the viewer for vimeo videos, is that possible? Thanks :)

  16. Chedie

    Hi!

    I really like your script but I would like to inquire about something…

    Currently, the images come out gracefully after clicking on thumbnails. Is it possible for the images to gracefully come out upon “HOVER” on the thumbnails? If yes, how do I go about it?

    I really would love to hear a response from you soon.

    Thank you!

  17. Simon Duncan

    Hi…

    Got it! (Ignore previous message)

    Sorry… for some reason I was missing a “<" on line 574 of the javascript file.

    Great script.

    Simon

  18. Inah

    Hi! I’m just wondering if this player can be used with vimeo or video in any way? Thank you!

  19. Trent Post author

    @Chedie, @Tanya, and @joshuaseo

    Funny all 3 of you asked me the same exact question on the same day. Are you all the same person by some chance? Anyway, I am posting my response to each of you here so that you can collaborate in reaching the solution.

    I have never tried before to make the gallery react to hover instead of click. I imagine it would look something like what you (Tanya) mentioned, changing out the .click event bindings in the script to .mouseover bindings. You probably will want to disable history by setting the ‘enableHistory’ config option to false.

    Let me know how it goes.

  20. Joshua

    Chedie is working with me on this project and I’m not sure who Tanya is. I changed 4 places that .click was located at then replaced it with .mouseover but it still doesn’t do the exact desirable result.

    On line 167, enableHistory is already false. Unless I’m missing another place. If you’d like to see the example, go here.

  21. Nilez

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Some thumbnail and original images sometimes have visual problems on
    Internet Explorer 7 & 8. Mostly on the black colors on an image, big white
    spots occur. Those spots sometimes occur bigger, sometimes smaller. On
    Firefox, there is not any problem.

    See here the example ( so open in IE 7 or 8 ) http://www.designilez.com/mf/trouwen.php#11

  22. Trent Post author

    @Nilez – I found this which may explain the white specs. From Dan Walker
    ( http://forum.joomlaworks.gr/index.php?PHPSESSID=eab2713e0cca1ac4803158ac3b82db72&topic=2566.msg10513#msg10513 ):

    “After some research, the problem with white dots in IE has something to do an IE bug
    which shows very dark black as transparent with certain opacity filters. See this
    forum post: http://dynamicdrive.com/forums/showthread.php?p=118396. The white dots
    are the white background showing through transparency in the image. The simple fix is
    to make your background color of the image rotator div black. White dots will be gone.”

  23. Patz

    Hi Trent

    Couldn’t get the gallery to work on the site I want to use it on, but was working fine on a test page I made. I’ve got an external scripts.js file with loads of stuff going on in there, so I took out chunks of code bit by bit to try and find a conflict. When I take my other jquery pagination code out it works perfectly!

    So just removing this – initPagination(); allows it to function completely normally! But I need this for pagination elsewhere in the site…

    The script on my page is exactly the same as yours on the advanced one. I’m sure there’s a simple way around this but my script knowledge is pretty lame =P

    Any help on this much appreciated

    Thanks a lot

    Pat

  24. Trent Post author

    @Patz – Could you post a link to your site where you are testing. Galleriffic does build its pagination using a class name ‘pagination’, and it is likely the other script may be selecting the Galleriffic generated elements unintentionally.

  25. Andrea

    Hello
    This gallery of images is really well done!
    Many there are, but it contains all the necessary elements:
    1.thumbnails
    2.right images
    3.Preload
    4.Link exterior on each image
    5.Effect “on mouse over” on miniatures.
    6. ……

    Question
    I’m a Web designer and I’m going to put
    my site such as galleries of thumbnails.

    On some sites that use your gallery is not your name.
    E ‘required to add your copyright ?
    It requested a link to something?

    Thanks

  26. Trent Post author

    @Andrea

    You can use the gallery however you like without needed to add my name anywhere. I simply ask to email me a link to where you implemented the gallery for reference purposes.

Comments are closed.