ASP.Net : Create Image Gallery | Neha Sharma

Download Source code files

Live Demo

This is the question asked to me by one of my follower if I am replying late then sorry else have a look:

You can follow below process:

1.  Download whole project
2.  Add images,css and js folder in to your solution explorer.
3.  Add a new page.
4.  Add below lines under head section :

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  
   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>

5.  Before place any control of asp.net Add below line:

<a href="images/image-1.jpg" rel="lightbox"> </a>

6.  Now ,add an asp.net image control under the anchor <a></a> tag like below :

  <a href="images/image-1.jpg" rel="lightbox">

  <asp:Image ID="Image1" runat="server" ImageUrl="images/thumb-1.jpg" Width="100" Height="55"/></a>

7.    Add below lines in to a div:

<a href="images/image-1.jpg" rel="lightbox">

            <asp:Image ID="Image1" runat="server" ImageUrl="images/thumb-1.jpg" Width="100" Height="55" />

            </a>

        <a href="images/1.jpg" rel="lightbox">

                       <asp:Image ID="Image2" runat="server" ImageUrl="images/1 -thumb.jpg" Width="100" Height="55"/> </a>

        <a href="images/2.jpg" rel="lightbox">

           

            <asp:Image ID="Image3" runat="server" ImageUrl="images/2-thumb.jpg" width="100" height="55" />

        </a>

Here I use three different sizes of images in the same size of asp.net image control.

Save all the work and view the page in browser if something you want to edit or modify write codes in css or js or ask to me.

Thanks

Neha Sharma