Create Image gallery with DataList from Database using jQuery masonry Plugin in ASP.Net

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