<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>

      public static class MyCustomHtmlHelper
    {
        public static string CustomHtmlHelper(this HtmlHelper html, 
string htmlContent)
        {
           return "<p>this my first html helper </p>";
        }
     }

public static string  JPhotoGalleryExt(this  HtmlHelper html, 
List<string> photoList, int imageHeight, int imageWidth,
 Orientation orientation)
        {
            StringBuilder References = new StringBuilder();
 
            StringBuilder ImageList = new StringBuilder();
            StringBuilder MainImageStyle = new StringBuilder();
            StringBuilder HorizontalGallery = new StringBuilder();
            TagBuilder galleryStyle = new TagBuilder("style");
        
            References.Append( html.JavaScript("jquery-1.2.6.js"));
            References.Append(   html.JavaScript("jquery.galleria.js"));
            galleryStyle.Attributes["type"] = "text/css";
            MainImageStyle.Append(" #main_image {   ");
            string Height = "height: " + imageHeight.ToString() + "px;";
            string Width = "widht: " + imageHeight.ToString() + "px;";
 
            References.Append ( html.CSSFile("galleria.css"));
         if (orientation == Orientation.Vertical)
 
     References.Append(html.CSSFile("GalleryStyle.css"));
         else if (orientation == Orientation.Horizontal)
         {
             References.Append(html.CSSFile("HGalleryStyle.css"));
             HorizontalGallery.Append(galleryStyle.ToString());
         }
               References.Append (html.JavaScript("JimageGallery.js"));
              galleryStyle.Attributes["media"] = "screen,projection";
 
          
            MainImageStyle.Append(Height);
            MainImageStyle.Append(Width);
            MainImageStyle.Append("}");
            galleryStyle.InnerHtml = MainImageStyle.ToString();
         
            // Here is the html of Horizontal gallery style 
          
            HorizontalGallery.Append(References.ToString());
          // 
     HorizontalGallery.Append( "<div class='demo'>");
     HorizontalGallery.Append(" <div id='main_image'></div>");
     HorizontalGallery.Append("<ul class='gallery_demo_unstyled'>");
     foreach (string photo in photoList)
     {
         HorizontalGallery.Append(("<li><img src='"+photo+"' alt='Stones'
            title='Stones - from Apple images'></li>"));
     }
        HorizontalGallery.Append("</ul>");
     HorizontalGallery.Append("<p class='nav'><a href='#'
 onclick='$.galleria.prev(); return false;'>&laquo; previous</a> |
 <a href='#' onclick='$.galleria.next(); return false;'>next &raquo;</a></p>");
 
     HorizontalGallery.Append("</div>");
             
           return  HorizontalGallery.ToString(); 
        }

<%=Html.JPhotoGalleryExt(new List<String>(){"img1.jpg","img2.jpg",   
       100,300, global::Orientation.Vertical) %>