← Tutti gli articoli

Fresh Sliding Thumbnails Gallery with jQuery and ASP.NET

06 April 2011  ·  Asp.Net · Article  ·  1186 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.
Si è verificato un errore imprevisto. Ricarica ✕

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.