We Keep Coding

when i click the button the whole webpage moved to another webpage like a slide

I have two html pages: Page1.html, Page2.html. I would like to get the page 2.html when i click the button in page1 with slide effect transition. I have found a lot of plugins and solutions to slide between two divs or slide within a container but what I need is a complete page change.
// Author: Max McKinney
// Version: 1.0
// Description: Fades the page from a given color to show the content and fades out to the given color.
// Requires: jQuery
(function ( $ ) {
$.fn.mPageTransition = function(options) {
// Grab the settings
var settings = $.extend({
color: "#ffc107",
fadeOutTime: 300,
fadeInTime: 300
}, options)
// Get the body reference and get the original background color as we will be changing that during the transition
var body = $('body');
var originalBackgroundColor = $(body).css("background-color");
// Due to the css the body is initially hidden so we will fade it in. This prevents and "flickering" from occuring
$(body).css('visibility','visible').hide().fadeIn(settings.fadeInTime);
// Intercept all link clicks to fade page out
$("a").click(function(e) {
// Get the original link location and stop it from occuring
var link = this;
e.preventDefault();
// First fade body content away, fade the background color to the defined custom color. Once it has fade in, fade it away and then follow the link href
$(body).animate({
"background-color": settings.color,
"opacity": 0
}, settings.fadeInTime, function() {
// Fade background color back to orginal and once finished follow link
$(body).animate({"background-color": originalBackgroundColor}, settings.fadeOutTime, function() {
var href = $(link).attr("href");
location.href=href;
})
});
});
};
}( jQuery ));

Why is my masonry not layout properly when it's loading images?

I'm using masonry layout by desandro and It's working fine. Though when it's loading the images, the layout is out. It rearranges itself after all images are loaded but all stack up together when loading.
Flickr seems to be the one that I'm aiming for the layout. On flickr photostream, the tiles are already layout with gray colored background and it loads its images there directly. How can I achieve something like this?
Here's the script that I'm using:
var $container = $('#wall');
$container.imagesLoaded(function(){
$container.masonry({
"columnWidth": ".grid-sizer",
"gutter": ".gutter-sizer",
"itemSelector" : '.item'
});
});
It's important to note also that I'm using infinite loading by Paul on a WordPress theme that I'm implementing for my blog.
$container.infinitescroll({
navSelector : '.pagination ', // selector for the paged navigation
nextSelector : '.next.page-numbers', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
msg: null,
msgText: "<small>loading content...",
finishedMsg: "<small>End of line.</small>",
speed: 'fast',
img: 'http://i.imgur.com/Ky3zbSs.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);

Masonry Center when colums are too large and leave a gap on the right

I am new to javascript. I really only know html css and adding masonry to my new tumblr theme was a challenge I wanted to undergo and it is proving to be just that: a challenge.
my example page: Example
You can see that if the columns cannot fill the whole page then a large gap will be on the right of the masonry grid. What I want is to have that grid center according to the width of the window size if that gap exists.
I have tried hacking this with css using auto margins on .masonry and on .entry masonry-brick and no luck.
I figured this might be something fixed in javascript/jquery but I'm too new to it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js">
</script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#posts');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entry',
});
});
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
columnWidth: 250,
itemSelector: '.entry'
});
$container.infinitescroll({
itemSelector : ".entry",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
Here is all of the code (the code was copy and pasted from a theme developer who was opening this for other developers).
Thanks in advance for anybody's help.

Masonry Hide Images until fully loaded

I am trying to hide my Masonry images until the page finished loading as currently the images load in a long strip to the left of the screen, before organising themselves.
I cannot seem to get the container to hide and then show once everything else has been loaded.
Here is the link: http://inspiredworx-labs.com/sites/blg/
Here is my snippet (with commented out code that I've tried to implement for the hide/show bit):
<script>
$(window).load( function(){
var $container = $('#masonry-container');
// initialize
$container.masonry({
//columnWidth: 60,
gutter: 6,
itemSelector: '.masonry-item'
});
})
/*
$('#masonry-container').hide();
$container.imagesLoaded(function(){
$('#masonry-container').show();
})
*/
</script>

You should include your Masonry instance within your images imagesLoaded like so:
var $container = $('#masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry-item',
gutter: 6
});
});

I do not getting whatever you have tried.
But there is a javascript library that is "imagesLoaded".
that will help you
I did it in this way
// created a array with image and data
var elemar = [];
$.each(data, function(j,subData){
var img = document.createElement('img');
img.src = 'images.jpg';
item.appendChild( img );
elemar.push(item);
});
// loading div after image loaded
imagesLoaded(elemar).on( 'progress', function( imgLoad, image ) {
var item = image.img.parentNode;
container.appendChild( item );// container is an javascript , $('#containerdiv'), where all div will be publish
msnry.appended( item ); // msnry intializaion
});
});

Isotope Jquery plugin layout issues

i am trying to set up isotope on this site, it needs to handle the layout and i need to be able to append items to the container.
The issue is that it does not seem to initialize the images properly, here is how i init it:
$(document).ready(function(){
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 400,
gutterWidth: 10
},
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: true
},
resizesContainer: true,
});
load_more();
});
The images are completly unaffected by the masonry options, and if i specify "Width" in my CSS i have loading issues.
load_more preforms an ajax call and on success it calls this function with the data returned:
function data_loaded(data) {
var newItems = "";
for (var i = 0; i < data['posts'].length; i++) {
newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
}
/* append images*/
var $newItemsObj = $(newItems);
$('#container').isotope( 'insert', $newItemsObj );
}
The site is http://www.hotchinesebabes.com/
The site is safe for work, there are no nude images
It also seems like the site needs a refresh to load properly, i guess the images get catched the second time, so it fails the first time due to triggering isotope prior to image load ?

Isotope will not work because your images haven't loaded yet, so the width and height of images are 0. Use https://github.com/desandro/imagesloaded or fix the height and width of your images with CSS.