本文原创，转载请说明，地址：http://hi.baidu.com/44498/blog/item/3a20a4167de88c4021a4e9d5.html

  

在上一节里面，我们介绍了照片显示的页面设计，当然，很基础，仅仅显示了一张照片。

但是我们在其他一些WEB应用中看到多种多样的展示页面是如何设计出来的呢？

其实，这个显示模块大体分为两种展示，一个是缩略图结合大图滚动展示，一个是图片列表式的显示。

----------------------------

我们今天先来介绍一下这种缩略图结合大图的这种常用交互式展示。

首先，我们要显示图片，用到的是我们以前编写的PHOTO类，我们继续改良它。

在上一节里面，我们用的是LINQ的数据源来显示了一张图片。

那么，在本节里，我们如果要更自由的显示图片，进行某种交互，我们就要用手动的方式去控制，更灵活一点。

-----------------------------

我们首先打开PHOTO类，添加几个方法。

    public static IList GetPhotoUrl(int i,int j)
    {
        IList d = (from c in Ct.PHOTO
                   where c.id > i
                select c).Take(j).ToList();
        return d;
    }

此方法是获取图片的一个简易版本，接受两个参数，可以自己指定显示图片的个数；

效果图如下：

为了方便新人朋友了解控件使用方法，我把前台页面代码也发出来。

前台页面的主要组成是一个table，内部有一个Repeater和一个img控件：

<table class="style1">
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                            <asp:Repeater ID="Repeater1" runat="server">
                                <ItemTemplate>
                                    <asp:ImageButton
                                    CommandName='<%# Eval("id") %>'
                                    OnCommand="GetImage"
                                    ID="ImageButton1"
                                    runat="server"
                                    ImageUrl='<%# Eval("photopath") %>'
                                    Height="100px" />
                                </ItemTemplate>
                            </asp:Repeater>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                            <img id="ImageMain" runat="server" alt="pic" height="300" />
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>

-----------------------------

仅仅这样还不够，因为相册加载的时候，要给用户一个默认的显示，我们就用上面的img控件做文章吧。

我们在PHOTO类里继续添加一个简易的方法：

    public static IList GetFirstPhoto()
    {
        IList s = (from c in Ct.PHOTO
                
                 select c.photopath).Take(1).ToList();
        return s;
    }

获取一张图片，然后在后台页面里面绑定。结合前面的显示，我们后台可以整合成一个方法。

void PhotoBind()
    {
        this.Repeater1.DataSource = Photo.GetPhotoUrl(1,5);
        this.Repeater1.DataBind();
        this.ImageMain.Src =
        Photo.GetFirstPhoto()[0].ToString();
    }

方法调用，可以自行选择生命周期，写在默认的page_load里面也可以。

这样，既把repeater的图片输出出来，也把下面默认的大图给绑定了。

效果图如下：

初步的一个显示效果出来了，但是如何通过点击页面头部的缩略图，让下边显示对应的大图呢？

我们来写代码。

    protected void GetImage(object sender, CommandEventArgs e)
    {
        this.ImageMain.Src = Photo.GetPhotoPath(int.Parse(e.CommandName))[0].ToString();
    }

代码写完了，这里面调用了一个全新的方法，叫做GetPhotoPath。

    public static IList GetPhotoPath(int id)
    {
        IList p = (from c in Ct.PHOTO
                where c.id == id
                select c.photopath).ToList();
        return p;
    }

也是在PHOTO类里写的，目的在于获取ID，根据缩略图的ID，显示大图。

基本上，就是这样了，当然，比较简陋，朋友们可以自行修改和调整。

OK，我们来编译一下，然后运行，看看效果。能否做到点击缩略图，显示对应的大图。

点击缩略图1，显示大图1：

点击缩略图2，显示大图2：

点击缩略图3，显示大图3：

简单的功能和逻辑已经完成了，细节问题，大家可以自行调整，我不是专业美工，做的可能不太好看。。。

----------------------------

很多地方都有优化和调整的余地，希望朋友们举一反三，自己想出更好的解决方案。