This seems to be a common issue that many people have had and seem to be able to fix but in my case, none of the solutions seem to work for me.
The page loads perfectly, but the overlap is happening when scrolling and more bricks are appended. Also, this seems to only happen when I first land on the page. If I refresh after everything has already loaded there is no overlap when scrolling down. I thought imagesLoaded was supposed to handle this but not working atm. Not sure where I went wrong.
For reference, here is the page where I am having the issue: http://isaacprice.me/blog/
Here is what my code looks like now:
<script>
jQuery(function( $ ) {
var $container = $('#all_posts');
$container.imagesLoaded( function() {
var $msnry = $container.masonry({
columnWidth: 240,
gutter: 20,
itemSelector: '.item',
"isFitWidth": true
});
});
$container.infinitescroll(
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).hide();
// ensure that images load before adding to masonry layout
//$newElems.imagesLoaded(function(){
// show elems now they're ready
$msnry.append( $newElems ).delay(500).imagesLoaded(function() {
$newElems.fadeIn();
$container.isotope( 'appended', $newElems );
//$msnry.append( $newElems ).masonry( 'appended', $newElems, true );
//$container.masonry( 'appended', $newElems, true );
});
//});
}
);
});
</script>
As you can see from the lines I have commented out I have tried multiple variations to keep the elements from overlapping. No luck. I get the same exact issue every way I have tried writing this.
Any help would be very much appreciated.
Your mixing masonry and isotope. You are loading initially with masonry and then you call isotope with infinitescroll like this:
$msnry.append( $newElems ).delay(500).imagesLoaded(function() {
$newElems.fadeIn();
$container.isotope( 'appended', $newElems ); //WRONG!!
//$msnry.append( $newElems ).masonry( 'appended', $newElems, true );
//$container.masonry( 'appended', $newElems, true );
Try this instead:
$container.imagesLoaded(function() {
$newElems.fadeIn();
$container.masonry( 'appended', $newElems, true );
Related
My Isotope somehow does strange things, when it loads it zooms like crazy and when you filter, the images zoom and scale. It only happens once but it looks super strange. I already tried to place the jQuery at first before all the other code and I also tried to disable the CSS animations for the hover but none of these worked out.
My jQuery is:
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// Make filtering work
$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// Highlight the active filter
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
});
});
and a live demo can be found here:
http://dominikwierl.com/develop/v+v/projects
This can be closed.
I've found the answer with some more searching. It's called Isotope Shaking and it can happen when there are too many animations on one object.
See: https://isotope.metafizzy.co/faq.html#items-jump-after-transitioning-position
I'm using Featherlite as my lightbox and my problem is, I have a lot of images (thumbnails) to load on my page and when it's loading and I click one of the loaded image, the lightbox doesn't work. Therefore, it will go to the jpeg file on to the other page instead of a modal window.
How can I make my lightbox even after all the images are all loaded. By the way, I'm putting this on my WordPress but I don't want to use a plugin. Also I'm using FoundationPress.
Here's the code I use to initiate my lightbox
$(document).ready(function(){
$('a.gallery').featherlight({
targetAttr: 'href'
});
});
I have images loaded script but I'm using it on my masonry. How can I put the lightbox scripts inside the images loaded plugin?
(function() {
// Main content container
var $container = $('.grid');
var $grid = $('.grid').masonry({
// options
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
// Infinite Scroll
$container.infinitescroll({
navSelector : '.pagination', // selector for the paged navigation
nextSelector : '.pagination a.next', // selector for the NEXT link (to page 2)
itemSelector : '.grid-item', // selector for all items you'll retrieve
loading: {
msg: null,
msgText: '<i class="fa fa-circle-o-notch fa-spin"></i>',
finishedMsg: '<i class="fa fa-check"></i>',
img: null
}
},
// 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 );
});
});
})();
I'm not exactly sure if I understood correctly what solution you would like, but you could use
https://github.com/desandro/imagesloaded
which is specifically made for use cases like masonry plugin layouts,
to check if all images have finished loading and then execute functions / other scripts.
For example:
$('#your-container').imagesLoaded( {
},
function() {
$('a.gallery').featherlight({
targetAttr: 'href'
});
}
);
Hope this helps a bit?
I'm using infinite scroll with masonry everything works fine and lines up correctly. I have a button that when i click it makes that div bigger and shows extra content. the button works and loads fine when the page initially loads but when i scroll down and infinite loads new items and if i click the button to show more it jumps to the top of the screen.
I'm guessing i have to do some callback? Im kinda confused on this. How should I approach it?
this is the code im using:
$(function(){
$(".fancybox").fancybox();
var $container = $('.main_containera');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item1',
columnWidth: 0
});
});
var nextSelector = '.pagination-next a';
var origNextUrl = $(nextSelector).attr('href');
var offsetRegex = /(offset=)([0-9]+)/;
var offset = origNextUrl.match(offsetRegex)[2];
$container.infinitescroll({
navSelector : '.paginate', // selector for the paged navigation
nextSelector : '.pagination-next a', // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.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 );
});
}
);
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
});
Try changing
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
});
to
$('.comment_tr').click(function (e) {
$(this).toggleClass('disabled');
$(this).parent().parent().parent().find('form').slideToggle(250, function () {
$('.main_containera').masonry();
});
e.preventDefault();
e.stopPropagation( );
});
The click event may be propagating up to another link element which has an empty href or one that returns the user to the same page which usually just takes you back to the top. Alternatively, you could replace e.preventDefault(); and e.stopPropagation(); with return false;.
It's hard to say for sure that that's the issue without seeing the HTML though.
Could you post the HTML if that change doesn't work?
I'm using infinite scroll to load new content / images into the index of a wordpress theme via ajax.
This site is live at : http://mylife.holstee.com/
Here's the code that I'm using, it's deep in require.js and it's minified so you won't be able to see find it yourself.
$container.infinitescroll({
nextSelector: "#mylife-quinary .next-link a",
navSelector: "#mylife-quinary .next-link",
itemSelector: "#mylife-quaternary .item"
}, function( newElements ) {
mylife.quote();
var $newElems = $( newElements ).css({ opacity: 0 });;
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems );
});
}
);
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
columnWidth : $(".item").outerWidth(true)
});
});
What I want is a much smoother interface, so that you don't have to wait for the new content. Any ideas?
From www.infinite-scroll.com:
element.infinitescroll({
// ...
bufferPx : 40,
// increase this number if you want infscroll to fire quicker
// (a high number means a user will not see the loading message)
// new in 1.2
// default: 40
// ...
});
I have a <div id="content" class="clearfix"></div> which self populates with a list of image urls from a separate directory on my server.
Here is the live URL for the site : http://ilovesmallies.com/forum/showcase.php
I want to use infinite scroll and masonry plugins in this div.
However, I'm unsure of how to point towards a list of image urls with this script...
Here is how it is coded now and does not work.
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 250
});
});
$container.infinitescroll({
navSelector : '#content', // selector for the paged navigation
nextSelector : '#content a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.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 );
});
}
);
});
</script>
Can you render all your images?
My favorite way is first paginating the image items, then apply:
itemSelector <---> class of each item. (in your case, it can be each image)
navSelector <---> id of pagination element
nextSelector <---> point to element (link to next page) in pagination
And I just make the pagination display none.