Hi kats9993,
I have created a sample which full fill your requirement based on your previous question
So please refer below sample code and change the code according to your need.
HTML
<div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<li>
<asp:HiddenField ID="hfProductId" Value='<%# Eval("ID") %>' runat="server" />
<img id="imgProduct" alt="" style='height: 75px; width: 75px;' src='<%# Eval("Url") %>' />
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<br />
<div class="modal" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title">
<asp:Label ID="lblModalTitle" runat="server"></asp:Label></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="thumbnail">
<img id="imgSelectedProduct" alt="" />
<div class="caption">
CategoryId:- <b>
<asp:Label ID="lblCategoryId" runat="server" /></b>
<br />
CategoryName:- <b>
<asp:Label ID="lblCategoryName" runat="server" /></b>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">
Close</button>
</div>
</div>
</div>
</div>
</div>
<div>
<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" />
<style type="text/css">
.jcarousel-skin-tango .jcarousel-container
{
width: 325px !important;
}
img
{
cursor: pointer;
}
.thumbnail
{
border: 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
<link href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet" />
<script type="text/javascript">
$(function () {
$('[id*=mycarousel]').jcarousel({
auto: 2
});
$('[id*=imgProduct]').click(function () {
var productId = $(this).closest('li').find('[id*=hfProductId]').val();
$.ajax({
type: "POST",
url: "Default.aspx/GetProductDetails",
data: '{productId :' + productId + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var xmlDoc = $.parseXML(r.d);
var ProductDetails = $(xmlDoc).find("ProductDetails");
$('[id*=lblModalTitle]').html($(ProductDetails).find("Name").text());
$('[id*=imgSelectedProduct]').attr('src', $(ProductDetails).find("Url").text());
$('[id*=lblCategoryId]').html($(ProductDetails).find("CategoryId").text());
$('[id*=lblCategoryName]').html($(ProductDetails).find("CategoryName").text());
$('[id*=myModal]').show();
}
});
});
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptImages.DataSource = BindRepeater();
rptImages.DataBind();
}
}
[System.Web.Services.WebMethod]
public static string GetProductDetails(int productId)
{
DataTable dt = new DataTable("ProductDetails");
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = @"SELECT Id,Name,Url,CategoryId,CategoryName FROM [Images] WHERE Id = @ProductId";
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@ProductId", productId);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
}
}
DataSet ds = new DataSet();
ds.Tables.Add(dt);
return ds.GetXml();
}
private DataTable BindRepeater()
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = @"SELECT ID, [Url] FROM [Images]";
using (SqlCommand cmd = new SqlCommand(query, con))
{
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
}
}
return dt;
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not IsPostBack Then
rptImages.DataSource = BindRepeater()
rptImages.DataBind()
End If
End Sub
<System.Web.Services.WebMethod> _
Public Shared Function GetProductDetails(productId As Integer) As String
Dim dt As New DataTable("ProductDetails")
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Dim query As String = "SELECT Id,Name,Url,CategoryId,CategoryName FROM [Images] WHERE Id = @ProductId"
Using cmd As New SqlCommand(query, con)
cmd.Parameters.AddWithValue("@ProductId", productId)
Dim sda As New SqlDataAdapter(cmd)
sda.Fill(dt)
End Using
End Using
Dim ds As New DataSet()
ds.Tables.Add(dt)
Return ds.GetXml()
End Function
Private Function BindRepeater() As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Dim query As String = "SELECT ID, [Url] FROM [Images]"
Using cmd As New SqlCommand(query, con)
Dim sda As New SqlDataAdapter(cmd)
sda.Fill(dt)
End Using
End Using
Return dt
End Function
ScreenShot