Jasbir Bhinder Jasbir Bhinder - 3 months ago 28
ASP.NET (C#) Question

masonry not animating anymore

I am facing problem with masonry, it was working perfect, now it random stop animating.
i am so much confuse; i try everything but it is not animating pics any more..
is there anyone with solution?

I uploaded a simple webpage with masonry, Please take a look to find error.

http://www.bhinderblink.com/masonryDemo.aspx

http://www.bhinderblink.com (this main page working with DB, repeater and jquery to load pictures)

Script

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
})
});


</script>


Body

<div id="container">
<div class="box">
<div id="imageDiv1">
LoadImage...1<br />
<asp:Image runat="server" ID="img1" ImageUrl="~/pic/jas/pic10.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv2">
LoadImage...2<br />
<asp:Image runat="server" ID="Image2" ImageUrl="~/pic/jas/pic11.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv3">
LoadImage...3<br />
<asp:Image runat="server" ID="Image1" ImageUrl="~/pic/jas/pic12.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv4">
LoadImage...4<br />
<asp:Image runat="server" ID="Image3" ImageUrl="~/pic/jas/pic13.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv5">
LoadImage...5<br />
<asp:Image runat="server" ID="Image4" ImageUrl="~/pic/jas/pic14.jpg" />
</div>
</div>
<div class="box">
<div id="imageDiv6">
LoadImage...6<br />
<asp:Image runat="server" ID="Image5" ImageUrl="~/pic/jas/pic15.jpg" />
</div>
</div>
</div>


Main Page body

<form id="form1" runat="server">
<div id="topBanner">
</div>
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div id="container">
<div class="box">
<asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<div id="imageDiv">
LoadImage...
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>


main page script

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

<%--masonry--%>
<script type="text/javascript">

$(function () {
$('#container').masonry({
// options
itemSelector: '.box',
columnWidth: 240,
isAnimated: true
});
});


</script>
<%--Pagging--%>
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {

GetRecords();
}
});
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "/index.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("failur");
alert(response.d);
},
error: function (response) {
alert("error");
alert(response.d);
}
});
}
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);

pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

var pic_infoVar = xml.find("pic_info");

pic_infoVar.each(function () {
var customer = $(this);
$("#imageDiv").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/>");
});
$("#loader").hide();
}

</script>

Answer

Swap the order of the scripts

<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

jQuery has to be loaded first for masonry to work:

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

Edit:

Your site seems to have masonry applied to every container class, which seems to be different then your demo page.

Demo page:

<div id="container">
    <div class="box">
        <div id="imageDiv1">
            LoadImage...1<br />
            <img id="img1" src="pic/jas/pic10.jpg" />
        </div>
    <div class="box">
        <div id="imageDiv2">
            LoadImage...2<br />
            <img id="Image2" src="pic/jas/pic11.jpg" />
        </div>
    </div>
</div>

Main page:

    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_0" src="pic/jas/pic1.jpg" />
        </div>
    </div>
    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_1" src="pic/jas/pic2.jpg" />
        </div>
    </div>

So add another container to contain the .containers or apply masonry to the body itself

 $(function () {
            $('body').masonry({
                // options
                itemSelector: '.box',
                columnWidth: 240,
                isAnimated: true
            });
        });
Comments