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;'>« previous</a> |
<a href='#' onclick='$.galleria.next(); return false;'>next »</a></p>");
HorizontalGallery.Append("</div>");
return HorizontalGallery.ToString();
}
First we create a method that takes a generic collection of
photo Paths and the size of Main Image (Height and Width), then add reference
files listed in Required Files , we uses Orientation enum to make the developer
chooses his Orientation.