使用Jquery 结合后台数据库显示类似QQ图片中心

前台：

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " PhotoSliderImage.aspx.cs "
    Inherits = " PhotoSliderImage "   %>

<% @ Register Assembly = " AspNetPager "  Namespace = " Wuqi.Webdiyer "  TagPrefix = " webdiyer "   %>
<% @ Register Assembly = " Microsoft.Web.GeneratedImage "  Namespace = " Microsoft.Web "  TagPrefix = " cc1 "   %>
<% @ Register Assembly = " CellInPlaceEditingExtender "  Namespace = " Ajax "  TagPrefix = " Ajax "   %>
<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " ajaxtoolkit "   %>
<% @ Register Assembly = " System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 "
    Namespace = " System.Web.UI "  TagPrefix = " asp "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > SliderImage </ title >
     < link  rel ="Stylesheet"  href ="CSS/SliderCSS/basic.css"  type ="text/css"   />
     < link  rel ="Stylesheet"  href ="CSS/SliderCSS/galleriffic-5.css"  type ="text/css"   />
     < link  rel ="Stylesheet"  href ="CSS/SliderCSS/black.css"  type ="text/css"   />

     < script  type ="text/javascript"  src ="JavaScript/SliderJS/jquery-1.3.2.js" ></ script >

     < script  type ="text/javascript"  src ="JavaScript/SliderJS/jquery.history.js" ></ script >

     < script  type ="text/javascript"  src ="JavaScript/SliderJS/jquery.galleriffic.js" ></ script >

     < script  type ="text/javascript"  src ="JavaScript/SliderJS/jquery.opacityrollover.js" ></ script >

     < script  type ="text/javascript" >
        document.write( ' <style>.noscript { display: none; }</style> ' );

         //         function ViewImage(imgID)
         //         {
         //             var iv = $get('GeneratedImageForNews').src;
         //             var s = iv.indexOf("/News/");
         //             var resultImageView = iv.substring(0, s);

         //             $get('imageView').src = resultImageView + "/NewsImageHandler.ashx?imageid=" + imgID;

         //             //Setting Image Link
         //             $get('imageFullLink').href = iv + "ImageHandler.ashx?NEWSIMAGEID=" + imgID;
         //         }
     </ script >

</ head >
< body >
     < form  id ="Form1"  runat ="server" >
     < ajaxtoolkit:ToolkitScriptManager  ID ="ScriptManager1"  runat ="server"  EnableScriptGlobalization ="true" >
     </ ajaxtoolkit:ToolkitScriptManager >
     < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
         < ContentTemplate >
             < div  style ="margin-top: 2px; margin-left: 20px; margin-right: 40px;" >
             </ div >
         </ ContentTemplate >
     </ asp:UpdatePanel >

     < script  type ="text/javascript" >
        jQuery(document).ready( function ($)
        {
             //  We only want these styles applied when javascript is enabled
            $( ' div.content ' ).css( ' display ' ,  ' block ' );

             //  Initially set opacity on thumbs and add
             //  additional styling for hover effect on thumbs
             var  onMouseOutOpacity  =   0.67 ;
            $( ' #thumbs ul.thumbs li, div.navigation a.pageLink ' ).opacityrollover({
                mouseOutOpacity: onMouseOutOpacity,
                mouseOverOpacity:  1.0 ,
                fadeSpeed:  ' fast ' ,
                exemptionSelector:  ' .selected '
            });

             //  Initialize Advanced Galleriffic Gallery
             var  gallery  =  $( ' #thumbs ' ).galleriffic({
                delay:  2500 ,
                numThumbs:  6 ,
                preloadAhead:  10 ,
                enableTopPager:  false ,
                enableBottomPager:  false ,
                imageContainerSel:  ' #slideshow ' ,
                 // 显示“操作工具栏”
                controlsContainerSel:  ' #controls ' ,
                captionContainerSel:  ' #caption ' ,
                loadingContainerSel:  ' #loading ' ,
                renderSSControls:  true ,
                renderNavControls:  true ,
                playLinkText:  ' Play Slideshow ' ,
                pauseLinkText:  ' Pause Slideshow ' ,
                prevLinkText:  ' &lsaquo; 上一页 ' ,
                nextLinkText:  ' 下一页 &rsaquo; ' ,
                nextPageLinkText:  ' Next &rsaquo; ' ,
                prevPageLinkText:  ' &lsaquo; Prev ' ,
                enableHistory:  true ,
                autoStart:  false ,
                syncTransitions:  true ,
                defaultTransitionDuration:  900 ,
                onSlideChange:  function (prevIndex, nextIndex)
                {
                     //  'this' refers to the gallery, which is an extension of $('#thumbs')
                     this .find( ' ul.thumbs ' ).children()
                            .eq(prevIndex).fadeTo( ' fast ' , onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo( ' fast ' ,  1.0 );

                     //  显示照片张数 *
                     this .$captionContainer.find( ' div.photo-index ' )
                    .html( ' Photo  '   +  (nextIndex  +   1 )  +   '  of  '   +   this .data.length);
                },
                onPageTransitionOut:  function (callback)
                {
                     this .fadeTo( ' fast ' ,  0.0 , callback);
                },
                onPageTransitionIn:  function ()
                {
                     var  prevPageLink  =   this .find( ' a.prev ' ).css( ' visibility ' ,  ' hidden ' );
                     var  nextPageLink  =   this .find( ' a.next ' ).css( ' visibility ' ,  ' hidden ' );
                     if  ( this .displayedPage  >   0 )
                        prevPageLink.css( ' visibility ' ,  ' visible ' );

                     var  lastPage  =   this .getNumPages()  -   1 ;
                     if  ( this .displayedPage  <  lastPage)
                        nextPageLink.css( ' visibility ' ,  ' visible ' );

                     this .fadeTo( ' fast ' ,  1.0 );
                }
            });

            gallery.find( ' a.prev ' ).click( function (e)
            {
                gallery.previousPage();
                e.preventDefault();
            });

            gallery.find( ' a.next ' ).click( function (e)
            {
                gallery.nextPage();
                e.preventDefault();
            });


             function  pageload(hash)
            {
                 if  (hash)
                {
                    $.galleriffic.gotoImage(hash);
                }  else
                {
                    gallery.gotoIndex( 0 );
                }
            }

            $.historyInit(pageload,  " advanced.html " );
            $( " a[rel='history'] " ).live( ' click ' ,  function ()
            {
                 var  hash  =   this .href;
                hash  =  hash.replace( / ^.*# / ,  '' );
                $.historyLoad(hash);

                 return   false ;
            });
        });
     </ script >

     < div  id ="page" >
         < div  id ="container" >
             < div  class ="navigation-container" >
                 < div  id ="thumbs"  class ="navigation" >
                     < a  class ="pageLink prev"  style ="visibility: hidden;"  href ="#"  title ="Previous Page" >
                     </ a >
                     < ul  class ="thumbs noscript" >
                         < asp:Repeater  ID ="RptSliderImage"  runat ="server"  OnItemDataBound ="RptSliderImage_ItemDataBound" >
                             < ItemTemplate >
                                 < asp:Literal  ID ="litNewsImageID"  Visible ="false"  runat ="server"  Text ='<%#Eval("ID")  % > '> </ asp:Literal >
                                 < li >
                             <% --  Using biary data show image -- %>
                                   <% --    < asp:HyperLink ID = " HLLeaf "  CssClass = " thumb "  Width = " 100px "  Heigh = " 80px "  runat = " server "
                                        NavigateUrl = ' <%# "~/News/ImageHandler.ashx?NEWSIMAGEID="+ Eval("ID")%>'>
                                     < asp:Image ID = " imgScroll "  Width = " 100px "  Height = " 150px "  ImageUrl = ' <%# "~/News/ImageHandler.ashx?NEWSIMAGEID="+ Eval("ID")%>'
                                        runat = " server "   /></ asp:HyperLink >-- %>
                                 
                                  <% --  Using image path show image -- %>
                                  < asp:HyperLink  ID ="HLLeaf"  CssClass ="thumb"   runat ="server" >
                                     < asp:Image  ID ="imgScroll"  runat ="server"   /></ asp:HyperLink >
                                       
                                     </ a >
                                     < div  class ="caption" >
                                         < div  class ="image-title" >
                                             <% # Eval ( " NewsImageDescription " ) %> > </ div >
                                     </ div >
                                 </ li >
                             </ ItemTemplate >
                         </ asp:Repeater >
                     </ ul >
                     < a  class ="pageLink next"  style ="visibility: hidden;"  href ="#"  title ="Next Page" >
                     </ a >
                 </ div >
             </ div >
             <!-- 照片选择列表结束 -->
             < div  class ="content" >
                 < div  class ="slideshow-container" >
                     < div  id ="controls"  class ="float_photo" >
                     </ div >
                     < div  id ="loading"  class ="loader" >
                     </ div >
                     < div  id ="slideshow"  class ="slideshow" >
                     </ div >
                 </ div >
             </ div >
             < div  id ="caption"  class ="bear1" >
             </ div >
             < div  style ="clear: both;" >
             </ div >
         </ div >
     </ div >
     < div  style ="display: none;" >
         < asp:TextBox  ID ="txtNewsImageAutoID"  runat ="server" ></ asp:TextBox >
     </ div >
     </ form >
</ body >
</ html >

后台：

 

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Data;
using  System.IO;
using  System.Collections;
using  System.Text;
using  System.Text.RegularExpressions;
using  Microsoft.Web;

public   partial   class  PhotoSliderImage : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! IsPostBack)
        {
             this .BindNewsImage();
        }
    }

     private   void  BindNewsImage()
    {
        DataSet ds  =   new  DataSet();
        DataView dv;

        TicOA.BLL.NewsImage NewsImageBll  =   new  TicOA.BLL.NewsImage();

         // 得到所有记录总数
         int  recordCount  =  NewsImageBll.GetListCount( "" );

         // 绑定数据信息
        ds  =  NewsImageBll.PagerGetList( "" ,  0 ,  20 ,  " AllNewsImageManage " );

        System.Data.DataTable dt  =  ds.Tables[ 0 ];
        dv  =   new  DataView(dt);

         // test data
         this .RptSliderImage.DataSource  =  dv;
         this .RptSliderImage.DataBind();
    }

     protected   void  RptSliderImage_ItemDataBound( object  sender, RepeaterItemEventArgs e)
    {
         string  imagePath  =   string .Empty;
         string  imageUrl  =   string .Empty;
         // 获取程序根目录
         string  tmpRootDir  =   string .Empty;
         // 转换成绝对路径
         string  imagesScrollPath  =   string .Empty;
         string  currentImageAllPath  =   string .Empty;

        Image imgScroll  =  (Image)e.Item.FindControl( " imgScroll " );
        HyperLink HLLeaf  =  (HyperLink)e.Item.FindControl( " HLLeaf " );

         // Get NewsImage AutoID
        Literal litNewsImageIDGV  =  (Literal)e.Item.FindControl( " litNewsImageID " );
         int  newsImageAutoID  =   0 ;

         if  (litNewsImageIDGV  !=   null )
        {
            newsImageAutoID  =  Int32.Parse(litNewsImageIDGV.Text);

             // Save NewsImage AutoID
             this .txtNewsImageAutoID.Text  =  newsImageAutoID.ToString();
        }

         // Get ImageURL by NewsImageAutoID
        TicOA.BLL.NewsImage NewsImageBll  =   new  TicOA.BLL.NewsImage();
        TicOA.Model.NewsImage NewsImageModel  =  NewsImageBll.GetModel(newsImageAutoID);
         if  (NewsImageModel.NewsImageURL  ==   null )
        {
             // NewsImageURL Is Null
            imgScroll.Visible  =   false ;
            HLLeaf.Visible  =   false ;
            HLLeaf.NavigateUrl  =   string .Empty;
            imgScroll.ImageUrl  =   string .Empty;
        }
         else
        {
             // NewsImageURL Is Not Null
            imgScroll.Visible  =   true ;
            imageUrl  =  System.Configuration.ConfigurationManager.AppSettings[ " DocPath " ].ToString()  +  imagePath;
            tmpRootDir  =  Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());
            imagesScrollPath  =  tmpRootDir  +  imageUrl.Replace( @" / " ,  @" \ " );
             // HLLeaf.NavigateUrl = imagesScrollPath + NewsImageModel.NewsImageURL.Replace(@"/", @"\");
             // imgScroll.ImageUrl = imagesScrollPath + NewsImageModel.NewsImageURL;

            HLLeaf.NavigateUrl  =   " ~/FilesData/ImgUpLoad/ "   +  NewsImageModel.NewsImageURL;
            imgScroll.ImageUrl  =   " ~/FilesData/ImgUpLoad/ "   +  NewsImageModel.NewsImageURL;

             // Get current Image all path
            currentImageAllPath  =  imagesScrollPath  +  NewsImageModel.NewsImageURL;

             if  (File.Exists(currentImageAllPath)  ==   true )
            {
                System.Drawing.Image image  =  System.Drawing.Image.FromFile(currentImageAllPath);
                imgScroll.Height  =  Unit.Parse(image.Height.ToString());
                imgScroll.Width  =  Unit.Parse(image.Width.ToString());

                 if  (imgScroll.Width.Value  >  imgScroll.Height.Value)
                {
                     if  (imgScroll.Width.Value  <   100 )
                    {
                        imgScroll.Width  =  Unit.Parse( "" );
                        imgScroll.Height  =  Unit.Parse( "" );
                    }
                     else
                    {
                        imgScroll.Width  =  Unit.Parse( " 100px " );
                        imgScroll.Height  =  Unit.Parse( "" );
                    }
                }
                 else
                {
                     if  (imgScroll.Height.Value  <   100 )
                    {
                        imgScroll.Width  =  Unit.Parse( "" );
                        imgScroll.Height  =  Unit.Parse( "" );
                    }
                     else
                    {
                        imgScroll.Width  =  Unit.Parse( "" );
                        imgScroll.Height  =  Unit.Parse( " 100px " );
                    }
                }

                 // HLLeaf.NavigateUrl = imgScroll.ImageUrl;
            }
             else
            {
                HLLeaf.NavigateUrl  =   "" ;
                imgScroll.Width  =  Unit.Empty;
                imgScroll.Height  =  Unit.Empty;
            }
        }

         // HLFJ.NavigateUrl = "../PlanQuery/JZQYPlanInfo.aspx?QYBH=" + DataBinder.Eval(e.Item.DataItem, "企业编号").ToString();
         // HLFJ.Target = "ContentFrame";
    }


}

 

 

显示后结果如下所示：

 

显示效果还有待提高，希望大家多多指教！

转载于:https://www.cnblogs.com/litaocnblogs/archive/2010/07/14/1777225.html