<script type="text/javascript" src=" jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<link href=" HGalleryStyle.css.css" rel="stylesheet" type="text/css" 
      media="screen">
// to make thumb images in horizontal orientation
jQuery(function($) {
            
            $('.gallery_demo_unstyled').addClass('gallery_demo'); 
            // adds new class name to maintain degradability
            
            $('ul.gallery_demo').galleria({
                  history   : true, 
// activates the history object for bookmarking, back-button etc.
                  clickNext : true, // 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
                        if(! ($.browser.mozilla && 
                        navigator.appVersion.indexOf("Win")!=-1) ) { 
// FF/Win fades large images terribly slow
                              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(500,0.3);
                        
                        // 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.3';
                        
                        // fade in the thumbnail when finnished loading
                        thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
                        
                        // hover effects
                        thumb.hover(
                              function() { thumb.fadeTo('fast',1); },
                              function() { 
_li.not('.active').children('img').fadeTo('fast',0.3); } 
// don't fade out if the parent is active
                        )
                  }
            });
      });
// I have put the previous code in  JimageGallery.js
 
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
 //…..here we will put list of images 
    <li><img src="/imagepath" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; 
previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next 
&raquo;</a></p>
</div>