Load and display image as slideshow from the Server directory(folder)

Question

I use .NET C# , I dynamically create folder to store the image I upload, ex:

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

So I could create different folders according to the page unique id. I have also created a thumbnail image from the image I have upload (cropped ones).

The problem I am trying to figure out is to display these images as a slide show from these dynamically created folder (display thumbnail in the page and clicking the thumbnail need to see the full size image just like slideshow).

I was trying to see examples in jQuery but its just client side. So is there any way to load these images and display as a slide show from the directory. Should I deal with DirectoryInfo in C#? Expecting a simple one.

Answer 1

I'm not familiar with .net or C#, but you could use jQuery after your files have been uploaded and your thumbnails created. You could also use some PHP to spit out the markup iteratively, and then wrap everything into a div and employ a lightbox plugin like Colorbox or Fancybox. For example:

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

and then you have the plugin script:

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

Perhaps the exact syntax might not work with the way you have your file structure set up, but hopefully this will get you started!

Answer 2

In the client side i have used jquery and Repeater Control in .net to bind the url and the thumbnail. I used lightbox and jquery to display the image.the client side code goes like this:

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

and the Repeater control is used to link the thumbnail and the 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>

in the code behind we could bind it withe the dataset.