// JavaScript Document
              
       jQuery(function($) {
              
              $('.gallery_demo_unstyled').addClass('gallery_demo');// adds new class name to maintain degradability
              $('.gallery_demo').removeClass('gallery_demo_unstyled');//remove unstyled class to allow thumbnails to show
              
              $('ul.gallery_demo').galleria({
                     history   : false, // activates the history object for bookmarking, back-button etc.
                     clickNext : false, // helper for making the image clickable
                     insert    : '#main_image', // the containing selector for our main image
                     onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
                            
                            // fade in the image & caption
                            image.css('display','none').fadeIn(1000);
                            caption.css('display','none').fadeIn(1000);
                            
                            
                            // fetch the thumbnail container
                            var _li = thumb.parents('li');
                            
                            // fade out inactive thumbnail
                            _li.siblings().children('img.selected').fadeTo(250,0.5);
                            
                            // fade in active thumbnail
                            thumb.fadeTo('fast',1).addClass('selected');
                            
                            // add a title for the clickable image
                            //image.attr('title','Next image >>');
                     },
                     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.5';
                            
                            // fade in the thumbnail when finnished loading
                            thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1000);
                            
                            // hover effects
                            thumb.hover(
                                   function() { thumb.fadeTo('fast',1); },
                                   function() { _li.not('.active').children('img').fadeTo('fast',0.5); } // don't fade out if the parent is active
                            )
                     }
              });
              
       });