← Tutti gli articoli

Fresh Sliding Thumbnails Gallery with jQuery and ASP.NET

06 aprile 2011  · Asp.Net · Article  ·  1194 visite

In this tutorial we are going to create the Asp.Net version of the Fresh Sliding Thumbnails Gallery.

You can found more information on the original site :
 

I modified the original javascript function buildThumbs in the jquery.gallery.js
 
 
 
  1. function buildThumbs() {  
  2.         current = 1;  
  3.         $('#imageWrapper').empty();  
  4.         $('#loading').show();  
  5.   
  6.           
  7.   
  8.   
  9.   
  10.   
  11.         $.ajax({  
  12.   
  13.             type: "POST",  
  14.   
  15.             url: "WSGallery.asmx/GetFreshSlidingGalleryImages",  
  16.   
  17.             data: "{ AlbumId:'" + album + "' }",  
  18.   
  19.             contentType: "application/json; charset=utf-8",  
  20.   
  21.             dataType: "json",  
  22.   
  23.             async: false,  
  24.   
  25.             success: function (data) {  
  26.                  
  27.                 var dataobj = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;  
  28.                  
  29.   
  30.                 ////var data = jQuery.parseJSON(data2.d); /* eval('(' + data2 + ')');*/  
  31.                 //var n = data.d.length;  
  32.   
  33.                 var countImages = dataobj.length;  
  34.                 var count = 0;  
  35.                 var $tContainer = $('<div/>', { id: 'thumbsContainer', style: 'visibility:hidden;' })  
  36.   
  37.   
  38.                 for (var i = 0; i < countImages; ++i) {  
  39.                     try {  
  40.                         var description = dataobj[i].desc[0];  
  41.                     } catch (e) {  
  42.                         description = '';  
  43.                     }  
  44.                     if (description == undefined)  
  45.                         description = '';  
  46.                     $('<img title="' + description + '" alt="' + dataobj[i].alt + '" height="75" />').load(function () {  
  47.                         var $this = $(this);  
  48.                         $tContainer.append($this);  
  49.                         ++count;  
  50.                         if (count == 1) {  
  51.                             /* load 1 image into container*/  
  52.                             $('<img id="displayed" style="display:block;" class="cursorPlus"/>').load(function () {  
  53.                                 var $first = $(this);  
  54.                                 $('#loading').hide();  
  55.                                 resize($first, 0);  
  56.                                 $('#imageWrapper').append($first);  
  57.                                 $('#description').html($this.attr('title'));  
  58.                             }).attr('src', $this.attr('alt'));  
  59.                         }  
  60.                         if (count == countImages) {  
  61.                             $('#thumbsWrapper').empty().append($tContainer);  
  62.                             thumbsDim($tContainer);  
  63.                             makeScrollable($('#thumbsWrapper'), $tContainer, 15);  
  64.                         }  
  65.                     }).attr('src', dataobj[i].src);  
  66.                 }  
  67.             },  
  68.   
  69.             error: function (msg) {  
  70.   
  71.                 alert(msg);  
  72.   
  73.             }  
  74.   
  75.         });  
  76.   
  77.   
  78.         ////,'json');  
  79.     }  
 To work this function needs WSGallery.asmx web services:
 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Services;  
  6. using System.Web.Script.Services;  
  7. using System.IO;  
  8. using System.Web.Script.Serialization;  
  9.   
  10. namespace FreshSlidingThumbnailsGallery  
  11. {  
  12.     /// <summary>  
  13.     /// Summary description for WSGallery  
  14.     /// </summary>  
  15.     [WebService(Namespace = "http://tempuri.org/")]  
  16.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  17.     [System.ComponentModel.ToolboxItem(false)]  
  18.     // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
  19.       
  20.       
  21.     [System.Web.Script.Services.ScriptService]  
  22.     public class WSGallery : System.Web.Services.WebService  
  23.     {  
  24.   
  25.           
  26.           
  27.   
  28.         [WebMethod , ScriptMethod(ResponseFormatResponseFormat = ResponseFormat.Json)]  
  29.         public List<cFreshSlidingImageGallery> GetFreshSlidingGalleryImages(string AlbumId) ///int GalleryID)  
  30.         {  
  31.   
  32.             string albumName =  AlbumId;  
  33.   
  34.             List<cFreshSlidingImageGallery> galleryimages = new List<cFreshSlidingImageGallery>();  
  35.   
  36.             DirectoryInfo di = new DirectoryInfo(Server.MapPath("thumbs/" + albumName));  
  37.             FileInfo[] rgFiles = di.GetFiles("*.jpg");  
  38.             string thumbsurl = "thumbs/" + albumName + "/";  
  39.             string imagesurl =  "images/" + albumName + "/";  
  40.   
  41.             foreach (FileInfo fi in rgFiles)  
  42.             {  
  43.                 //Response.Write("<br><a href=" + fi.Name + ">" + fi.Name + "</a>");  
  44.   
  45.   
  46.                 galleryimages.Add(new cFreshSlidingImageGallery(thumbsurl + fi.Name, imagesurl + fi.Name, "desc" + fi.Name));  
  47.   
  48.             }  
  49.             return galleryimages;  
  50.             /*  
  51.             JavaScriptSerializer js = new JavaScriptSerializer();  
  52.   
  53.             string ret= js.Serialize(galleryimages);  
  54.             return ret;  
  55.              */  
  56.         }  
  57.     }  
  58. }  
 
Below you can download the Visual Studio 2010 solution.