从服务器目录（文件夹）加载并显示图像为幻灯片答案

【问题标题】：Load and display image as slideshow from the Server directory(folder)从服务器目录（文件夹）加载并显示图像为幻灯片
【发布时间】：2010-01-27 21:40:16
【问题描述】：

我使用 .NET C#，我动态创建文件夹来存储我上传的图像，例如：

strFolder = Server.MapPath("./folder/folder_"+folid+"/")

所以我可以根据页面唯一 ID 创建不同的文件夹。我还从我上传的图像（裁剪的图像）创建了一个缩略图图像。

我想弄清楚的问题是从这些动态创建的文件夹中将这些图像显示为幻灯片（在页面中显示缩略图并单击缩略图需要像幻灯片一样查看完整尺寸的图像）。

我试图在 jQuery 中查看示例，但它只是客户端。那么有没有办法从目录中加载这些图像并显示为幻灯片。我应该在 C# 中处理DirectoryInfo 吗？期待一个简单的。

【问题讨论】：

标签： c# .net asp.net jquery

【解决方案1】：

我不熟悉 .net 或 C#，但您可以在上传文件并创建缩略图后使用 jQuery。您还可以使用一些 PHP 迭代地吐出标记，然后将所有内容包装到一个 div 中，并使用一个灯箱插件，如 Colorbox 或 Fancybox。例如：

 <div class='fancybox-wrapper'>

 <?php 
    $mydir = '/my_directory/';
    $dir = opendir($rootdir);

    while (false !== (readdir($dir))) { //starts the loop
       if ($file != '.' && $file != '..') { //strips current & parent directories
          $file_thumb = explode($file, '.'); //generates the thumbnail file name
          echo "<div rel='group'><a href='".$file."'>
                <img src='thumbs/".$file_thumb[0]."_thumb.'".$file_thumb[1]."'/>
                </a></div>";   
       }
    } 
 ?>

 </div>

然后你就有了插件脚本：

 <script type='text/javascript'>
   $(document).ready(function () {
      $('div.fancybox-wrapper').fancybox();
   });
 </script>

也许确切的语法可能不适用于您设置文件结构的方式，但希望这可以帮助您入门！

【讨论】：

【解决方案2】：

在客户端，我使用 .net 中的 jquery 和 Repeater Control 来绑定 url 和缩略图。我使用 lightbox 和 jquery 来显示图像。客户端代码如下：

 <script type="text/javascript">
    $(function() {
        $('a[@rel*=lightbox]').lightBox(); 
    });
    </script>

而Repeater控件用于链接缩略图和url：

<asp:Repeater id="imageRepeater" runat="server">
         <ItemTemplate>
    <a href='<%# Page.ResolveUrl((string)DataBinder.Eval(Container.DataItem, "largeImage")) %>' rel='lightbox'>
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Page.ResolveUrl((string)DataBinder.Eval(Container.DataItem, "thumbImage")) %>' Width="100" Height="75">
        </asp:Image></a>
         </ItemTemplate>
        </asp:Repeater>

在后面的代码中，我们可以将它与数据集绑定。

【讨论】：