Hi jordan,
I have created a sample which full fil your requriement you need to modify the code according to your need.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('#menu ul li a').click(function () {
var selectedLink = $(this)[0].innerHTML
localStorage.setItem('selectedLink', selectedLink);
});
});
window.onload = function () {
$('#menu ul li a').each(function () {
if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {
$(this).attr('style', 'background-color:deeppink');
localStorage.removeItem('selectedLink');
}
else {
$(this).attr('style', 'background-color:none');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="container">
<div id="menu">
<ul class="nav navbar-nav navbar-left">
<li class="active">
<asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"
runat="server" OnClick="BindImages" />
</li>
<li>
<asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"
runat="server" />
</li>
<li>
<asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Newest Added"
runat="server" />
</li>
</ul>
</div>
<br />
<br />
<br />
<div id="product" runat="server">
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
C#
protected void BindImages(object sender, EventArgs e)
{
DataTable clsGallery = new DataTable();
clsGallery.Columns.Add("ProductID");
clsGallery.Columns.Add("ColorID");
clsGallery.Columns.Add("GalleryID");
clsGallery.Rows.Add(1, 1, "Chrysanthemum");
clsGallery.Rows.Add(2, 2, "Desert");
clsGallery.Rows.Add(3, 3, "Hydrangeas");
clsGallery.Rows.Add(4, 4, "Jellyfish");
clsGallery.Rows.Add(5, 5, "Koala");
clsGallery.Rows.Add(6, 1, "Lighthouse");
clsGallery.Rows.Add(7, 2, "Penguins");
clsGallery.Rows.Add(8, 3, "Tulips");
clsGallery.Rows.Add(9, 4, "Product10");
clsGallery.Rows.Add(10, 5, "Product1");
clsGallery.Rows.Add(11, 1, "Product2");
clsGallery.Rows.Add(12, 2, "Product3");
clsGallery.Rows.Add(13, 3, "Product4");
clsGallery.Rows.Add(14, 4, "Product5");
clsGallery.Rows.Add(15, 5, "Product6");
clsGallery.Rows.Add(16, 1, "Product7");
clsGallery.Rows.Add(17, 2, "Product8");
clsGallery.Rows.Add(18, 3, "Product9");
string str = string.Empty;
int j = 0;
for (j = 0; j < clsGallery.Rows.Count; j++)
{
if (File.Exists(Server.MapPath("Backoffice/images/Category/" + clsGallery.Rows[j]["GalleryID"].ToString() + ".jpg")))
{
str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
<img class='imges' style='height:220px;' src='Backoffice/images/Category/" + clsGallery.Rows[j]["GalleryID"].ToString() + ".jpg" + @"' />
</div>";
}
}
product.InnerHtml = str;
}
VB.Net
Protected Sub BindImages(sender As Object, e As EventArgs)
Dim clsGallery As New DataTable()
clsGallery.Columns.Add("ProductID")
clsGallery.Columns.Add("ColorID")
clsGallery.Columns.Add("GalleryID")
clsGallery.Rows.Add(1, 1, "Chrysanthemum")
clsGallery.Rows.Add(2, 2, "Desert")
clsGallery.Rows.Add(3, 3, "Hydrangeas")
clsGallery.Rows.Add(4, 4, "Jellyfish")
clsGallery.Rows.Add(5, 5, "Koala")
clsGallery.Rows.Add(6, 1, "Lighthouse")
clsGallery.Rows.Add(7, 2, "Penguins")
clsGallery.Rows.Add(8, 3, "Tulips")
clsGallery.Rows.Add(9, 4, "Product10")
clsGallery.Rows.Add(10, 5, "Product1")
clsGallery.Rows.Add(11, 1, "Product2")
clsGallery.Rows.Add(12, 2, "Product3")
clsGallery.Rows.Add(13, 3, "Product4")
clsGallery.Rows.Add(14, 4, "Product5")
clsGallery.Rows.Add(15, 5, "Product6")
clsGallery.Rows.Add(16, 1, "Product7")
clsGallery.Rows.Add(17, 2, "Product8")
clsGallery.Rows.Add(18, 3, "Product9")
Dim str As String = String.Empty
Dim j As Integer = 0
For j = 0 To clsGallery.Rows.Count - 1
If File.Exists(Server.MapPath("Backoffice/images/Category/" + clsGallery.Rows(j)("GalleryID").ToString() + ".jpg")) Then
str += "<div class='row col-md-3 col-xs-6 hovereffect'>" & vbCr & vbLf & " <img class='imges' style='height:220px;' src='Backoffice/images/Category/" + clsGallery.Rows(j)("GalleryID").ToString() + ".jpg" + "' /> " & vbCr & vbLf & " </div>"
End If
Next
product.InnerHtml = str
End Sub
Screenshot
