Hi micah,
Will you please let me know why you want to bind using ajax?
Without using aja you can simpley bind the inages from database and apply the plugin.
Refer the below example.
HTML
<div class="container">
<h1>
Masonry + imagesLoaded, iteratively reveal items</h1>
<asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3"
CellPadding="2" CellSpacing="20">
<ItemTemplate>
<div id="images">
<div class="item">
<img class="image" src='<%# Eval("ImageUrl") %>' alt="" />
</div>
</div>
</ItemTemplate>
</asp:DataList>
</div>
<style type="text/css">
body
{
font-family: sans-serif;
}
#container
{
background: #DDD;
max-width: 1400px;
}
.item
{
width: 200px;
float: left;
}
.item img
{
display: block;
width: 100%;
}
button
{
font-size: 18px;
}
.container
{
width: 100%;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//masonry.desandro.com/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.js"></script>
<script type="text/javascript">
$(function () {
var $container = $('#images').masonry({
itemSelector: '.item',
columnWidth: 200
});
// reveal initial images
//$container.masonryImagesReveal($('#images').find('.item'));
});
$.fn.masonryImagesReveal = function ($items) {
var msnry = this.data('masonry');
var itemSelector = msnry.options.itemSelector;
// hide by default
$items.hide();
// append to container
this.append($items);
$items.imagesLoaded().progress(function (imgLoad, image) {
// get item
// image is imagesLoaded class, not <img>, <img> is image.img
var $item = $(image.img).parents(itemSelector);
// un-hide item
$item.show();
// masonry does its thing
msnry.appended($item);
});
return this;
};
</script>
Namespaces
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
C#
protected void Page_Load(object sender, EventArgs e)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
SqlCommand cmd = new SqlCommand("SELECT * FROM ImageSlider", con);
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Images");
dlImages.DataSource = ds;
dlImages.DataBind();
}
}
}
}
Screenshot
