Hello,
Currently on my site the jquery masonry is loading quite oddly, it loads all the images first then it sorts itself into position. i want it to load just like it does in pinterest.com.
Please help.
Regards,
Tamea
Jquery Code
jQuery( function($) {
// Scroll back to top
function attBackTopScroll() {
$( 'a[href=#top]' ).on('click', function() {
$( 'html, body' ).animate({scrollTop:0}, 'normal');
return false;
} );
}
// Scroll to comments
function attCommentScroll() {
$( '.comment-scroll a' ).click( function(event) {
event.preventDefault();
$( 'html,body' ).animate( {
scrollTop: $( this.hash ).offset().top
}, 'normal' );
} );
}
// Responsive
function wpexResponsiveNav() {
$("<select />").appendTo("#site-navigation");
$("<option />", {
"selected": "selected",
"value" : "",
"text" : attParams.responsiveMenu
}).appendTo("#site-navigation select");
$("#site-navigation a").each(function() {
var el = $(this);
if(el.parents('.sub-menu').length >= 1) {
$('<option />', {
'value' : el.attr("href"),
'text' : '- ' + el.text()
}).appendTo("#site-navigation select");
}
else if(el.parents('.sub-menu .sub-menu').length >= 1) {
$('<option />', {
'value' : el.attr('href'),
'text' : '-- ' + el.text()
}).appendTo("#site-navigation select");
}
else {
$('<option />', {
'value' : el.attr('href'),
'text' : el.text()
}).appendTo("#site-navigation select");
}
});
$("#site-navigation select").change(function() {
window.location = $(this).find("option:selected").val();
});
}
// Masonry Widths
function attMasonry() {
// **** browsers
if ($.browser.msie && parseInt($.browser.version, 10) === 8) {
$('.grid').masonry({
itemSelector: '.loop-entry',
gutterWidth : 30,
columnWidth: 300,
isAnimated: false
});
// Decent browsers
} else {
var $windowWidth = $(window).width();
var $gridWidth = $('.grid').width();
if ( $windowWidth > 700 && $windowWidth <= 1024) {
var $colWidth = ( $windowWidth - 120 ) / 3;
$('.grid').masonry({
itemSelector: '.loop-entry',
gutterWidth : 20,
columnWidth: $colWidth,
isAnimated: false
});
$('.loop-entry').width( $colWidth );
} else if ( $windowWidth > 400 && $windowWidth < 700 ) {
var $colWidth = ( $windowWidth - 100 ) / 2;
$('.grid').masonry({
itemSelector: '.loop-entry',
gutterWidth : 20,
columnWidth: $colWidth,
isAnimated: false
});
$('.loop-entry').width( $colWidth );
} else {
$('.grid').masonry({
itemSelector: '.loop-entry',
gutterWidth : 30,
columnWidth: 300,
isAnimated: false
});
$('.loop-entry').width(300);
}
}
}
$(document).ready(function(){
attBackTopScroll();
attCommentScroll();
attMasonry();
wpexResponsiveNav();
});
$(window).load(function(){
attMasonry();
});
$(window).resize(function() {
attMasonry();
});
if (document.addEventListener){
window.addEventListener("orientationchange", function() {
attMasonry();
});
window.addEventListener("resize", function() {
attMasonry();
});
}
});
