”Don’t focus on having a great blog. Focus on
producing a blog that’s great for your readers.”- Brian Clark
 
 

Simple ASP.NET and jQuery Image Gallery With Thumbnails

18 June 2014

First things first, we need to insert the following reference into the head section of our ASP.NET page.

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
  $(document).ready(function (){
    $('#thumbnails img').click(function (){
      $('#image').attr('src', $(this).attr('alt'));
    });
  });
</script>

 

Then somewhere in the body of our page we insert the following code. We set the src attribute of the HTML Image control with the location of the thumbnail, while the alt attribute contains the location of the large image.

<img id="image" src="" />
<div id="thumbnails">
  <asp:Repeater ID="rptThumbnail" runat="server">
    <ItemTemplate>
      <img src='img/thumbnail/<%#Eval("Thumbnail")%>'
        src='img/<%#Eval("Thumbnail")%>' />
    </ItemTemplate>
  </asp:Repeater>
</div>

 

On the code behind, we populate the thumbnails from database, and bind them all onto the Repeater control.

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    PopulateThumbnails();
  }
}

private void PopulateThumbnails()
{
  SqlConnection conn = new SqlConnection("your connection string");
  SqlCommand cmd = new SqlCommand("SelectThumbnail", conn);
  cmd.CommandType = CommandType.StoredProcedure;
    
  SqlDataAdapter objDataAdapter = new SqlDataAdapter(cmd);
  DataTable dt = new DataTable();

  try
  {
    if (conn.State != ConnectionState.Open) conn.Open();
    objDataAdapter.Fill(dt);
  }
  catch (Exception ex)
  {
    return;
  }
  finally
  {
    conn.Close();
  }

  if (dt.Rows.Count > 0)
  {
    rptThumbnail.DataSource = dt;
    rptThumbnail.DataBind();
   }
}

 

And that's it!! The image gallery will look like

 
Project Highlight
 
What Client Says
 
I’ve Got You Covered
  • Website Design
  • Application Development
  • Database System
  • Search Engine Optimization
  • Web Hosting
  • Graphic Design
  • Logo Design
  • Business Cards
  • Corporate Letterhead
  • Posters/Banners
  • Brochures and Flyers
  • Event Invitations
  • Promotional Products
  • Social Media Marketing
  • E-mail Marketing/Campaign
  • Event Marketing