从Server目录(文件夹)加载并以幻灯片形式显示图像

时间:2010-01-27 21:40:17

标签: c# .net asp.net jquery

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

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

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

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

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

2 个答案:

答案 0 :(得分:2)

我不熟悉.net或C#,但您可以在上传文件并创建缩略图后使用jQuery。您还可以使用一些PHP迭代地吐出标记,然后将所有内容包装到div中并使用Lightbox插件,如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>

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

答案 1 :(得分:1)

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

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

和Repeater控件用于链接缩略图和网址:

<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>

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