Fantastic Galleria

Fantastic Galleria is the old aino galleria 1.0. I tried using the new one, but found it to complex and buggy.

After I tried finding the old version and failing, I ended up taking the source from an old cached version of google code, and fixing it to work with the latest jquery 1.4, and maintaining it myself.

You can see this galleria in action in several sites like Airbnb.com and http://fantastic-galleria.heroku.com/

Requirements

Fantastic galleria requires JQuery 1.4 or above

Demo

http://fantastic-galleria.heroku.com

Installation

Copy fantastic.galleria.js to your javascript path Copy galleria.css to your stylesheet path

Do not rename galleria.css file name

Quick Start

For a rails example take a look at https://github.com/danpal/Fantastic-galleria-website

Add this to your javascripts file:

$(document).ready(function(){

 $('ul.galleria').galleria(
  {
     history : false,
     clickNext : true,
     insert : '#main_images',
     onImage : function(image,caption,thumb){
               // fade in the image & caption
                if(! (jQuery.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
                    image.css('opacity', .9).fadeTo('fast', 1);
                }
                if(caption.html() == ''){
                    caption.fadeOut('fast');
                }
                else{
                    caption.css('display','none').fadeIn('fast');
                }

                //// fetch the thumbnail container
                var _li = thumb.parents('li');

                //this creates problems
                //// fade out inactive thumbnail this is not working
                //_li.siblings().children().removeClass('selected');
                //_li.siblings().children().fadeTo('fast',0.65);

                //// fade in active thumbnail
                thumb.fadeTo('fast',1).addClass('selected');
 
                // add a title for the clickable image
                image.attr('title','Next image >>');

                jQuery('#galleria_container').trigger('img_change');
         
       },

            onThumb : function(thumb){ // thumbnail effects goes here

                // fetch the thumbnail container
                var _li = thumb.parents('li');

                // if thumbnail is active, fade all the way.
                var _fadeTo = _li.is('.active') ? '1' : '0.65';

                // fade in the thumbnail when finnished loading
                thumb.css({display:'none',opacity:_fadeTo}).fadeIn('fast');

                // hover effects
                thumb.hover(
                    function() { thumb.fadeTo('fast',1); },
                    function() { _li.not('.active').children('img').fadeTo('fast',0.65); } // don't fade out if the parent is active
                )
            }

      });
});

This will take any image on the ul.galleria class an added to the galleria. The images should be in a ul, each image is a different li

Eg in rails:

  %ul.galleria
    %li= image_tag("photo.jpg")

Contributing

If you'd like to contribute you can open an issue here in github or simple fork and ask for a pull request.

Credits

Fantastic galleria is maintained by Daniel Palacio

Aino Galleria is originally by David Hellsing (monc.se)

License

• Licensed under the GPL licenses.