Asp.net mvc image gallery
page 5 of 6
by Mohammed Salah
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30659/ 91

Take a look inside JphotoGalleryExt HtmlHelper Method
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(); 
        }

 

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.  

 


View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-10-06 3:41:15 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search