Develop Reference

Isotope Masonry items are overlapping each other

I'm using Isotope masonry library, Each items has different height according to their content
So I'm using this code for displaying them :
$(window).on('load', function() {
var $container = $('.members_results').imagesLoaded( function() {
$container.isotope({
itemSelector : '.block-member',
layoutMode : 'masonry',
percentPosition: true
});
});
});
But I have this displayed :
They are overlapping themselves, and I don't know how to fix it..
By the way I set height: auto; for .block-member
Thanks for your help !

You are assigning the $container variable to the result of a function, within which the variable is used. I believe you should assign it first, something like this:
$(window).on('load', function() {
var $container = $('.members_results');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.block-member',
layoutMode : 'masonry',
percentPosition: true
});
});
});

Portfolio Issue with Isotope filter

This has been a nightmare. I bought a Wordpress template but the support is offering me no help. The issue is that when you click one of the list items that acts like a filter sometimes doesn't work properly when you go to the lightbox gallery (clicking the picture). The main problem I encounter is when the user tries to hover the section before it has charged the lightbox shows a mix of pictures and not only the pictures of the section that you are. So far the Javascript related code is this:
$(window).load(function(){
// Container
var $container = $('.isotope-container');
$container.isotope({
filter:'*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
// Isotope Button
$('#options li a').click(function(){
var n = jQuery.queue( $( 'class' )[ 0 ], 'fx' );
var selector = $(this).attr('data-filter');
$container.isotope({
filter:selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('#options'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#options');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
$('.foliobox').removeClass('active');
$container.isotope( 'on', 'layoutComplete', function() {
$('.foliobox').each(function(){
$this = $(this);
if($this.is(':visible')){
$this.addClass('active')
}
})
} )
});
});
I guess that this is isotope caller.
I can post the rest of the code that calls the lightbox. I guess as an idea what could be done is add a fake button in the top of the gallery with a z-index and hide it when the function is complete. Could you help me with that? I am not good at all at javascript.
Here is the website: http://donarnold.com.au/
Many thanks!

jQuery Isotope layout initializing with inconsistent spacing

I am using Isotope for a layout. As you can see below, the grid initializes with inconsistent spacing. If I immediately called the isotope function again with filtering, the issue persists. But if I wrap it in a setTimeout, the issue is fixed.
Here is the JavaScript that creates the layout with inconsistent spacing:
var $container = $('#isotope').isotope({
itemSelector: '.tag-box',
layoutMode: 'fitRows',
sortBy: 'name',
getSortData: {
name: '.tag-name'
}
});
// This will fix the issue:
// setTimeout(function() {
// $container.isotope({filter: '*'});
// }, 0);
$('#filters').on('click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$container.isotope({filter: filterValue});
});
The setTimeout is fine for now, but is there a way to initialize the layout with even spacing?

Without a jsfiddle or link it is difficult to see but why use setTimeout when you can do this:
$(document).ready(function() {
var $container = $('#isotope').isotope({
itemSelector: '.tag-box',
layoutMode: 'fitRows',
filter: '*',
sortBy: 'name',
getSortData: {
name: '.tag-name'
}
});
});

Using JQuery to resize and realign images doesn't work on first load

So I am relatively inexperienced with Jquery. What I did was purchase a wordpress theme from theme forest and it has a portfolio section which is supposed to work either as a masonry or grid layout. Neither of which load correctly on first load. The theme uses the Isotope, and I think this link explains what needs to be done: http://isotope.metafizzy.co/appendix.html#imagesloaded
Below is the code that I think calls this function, and the site can be viewed here https://www.roseryflowers.com/bridal-gallery/
jQuery(document).ready(function($) {
/*-- Portfolio --*/
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({filter: '.element'});
$(window).trigger('resize');
$('.portfolio-links a').click(function(e){
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope( {filter: selector} );
});
}
I am at a loss for what to do here. Any help would be appreciated. I even implemented a preloader.

Remove the imagesloaded.js file from your page and change the line with
$(window).trigger('resize');
to
$(window).load(function(){ $(window).trigger('resize'); });

From Isotope's documentation
Unloaded images can throw off Isotope layouts and cause item elements
to overlap. imagesLoaded resolves this issue. imagesLoaded works by
triggering a callback after all child images have been loaded.
initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
//options
});
});
This could be the problem
There is a little bit more about...
EDIT
your wrapper tag is ".portfolio-items" then try this
var $container = $('.portfolio-items').imagesLoaded(function () {
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({ filter: '.element' });
$(window).trigger('resize');
$('.portfolio-links a').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope({ filter: selector });
});
}
});
You need to be sure to add ImagesLoaded to your project https://github.com/desandro/imagesloaded

JQuery Infinite Scroll Help - passing variables to second page

Problem: I have implemented an infinitescroll plugin in my rails app, along with JQuery Masonry. It works perfectly but I am facing one little problem: starting from the second page, the hover function does not get triggered. This problem is very similar to this post on Stackoverflow. I'm supposed to call my hover function again after the Masonry callback.
My original code:
<script>
$(function () {
var $container = $('#container_masonry');
$container.infinitescroll({
navSelector: '.pagination'
nextSelector: '.pagination a',
itemSelector: '.image_masonry'
loading: {
finishedMsg: 'Done loading'
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function(newElements) {
//hide new items while loading
var $newElems = $(newElements).css({ opacity: 0 });
//images must be loaded completely before adding to layout
$newElems.imagesLoaded(function(){
//they are loaded and ready to be showed
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.image_masonry',
columnWidth: 10,
isAnimated: true,
animationOptions: { duration: 400 },
isResizable: true,
isFitWidth: true
});
$('.image_masonry').hover(
function(){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
});
});
</script>
I should add the following,
$('.image_masonry').hover(
function(){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
to right after,
$newElems.imagesLoaded(function(){
//they are loaded and ready to be showed
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
//ADD HOVER FCN HERE
However, simply adding the whole hover function did not work. I'm new to jQuery so I'm not entirely sure, but I need to pass in the related variables along with the function for it to work (got this hint from the similar post. So I should add something like
$('.image_masonry').hover(
function(SOME-RELATED-VARIABLES){
$('.title',this).fadeIn();
$('.like_num',this).show();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
}, function(SOME-RELATED-VARIABLES){
$('.title',this).fadeOut();
$('.like_num',this).hide();
var buttonDiv= $(this).children('.button');
buttonDiv.toggle();
});
But I need someone to teach me what I should put in there. I'm struggling because of my lack of familiarity with jQuery. I appreciate your help a lot!

You were missing some commas between rows 5-11. Also if you're loading external content at a later time, you need to delegate the hover event with on or delegate depending on your version. I added on below.
$(function () {
var $container = $('#container_masonry');
$container.infinitescroll({
navSelector: '.pagination',
nextSelector: '.pagination a',
itemSelector: '.image_masonry',
loading: {
finishedMsg: 'Done loading',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function (newElements) {
//hide new items while loading
var $newElems = $(newElements).css({
opacity: 0
});
//images must be loaded completely before adding to layout
$newElems.imagesLoaded(function () {
//they are loaded and ready to be showed
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.image_masonry',
columnWidth: 10,
isAnimated: true,
animationOptions: {
duration: 400
},
isResizable: true,
isFitWidth: true
});
$('body').on({
mouseenter: function () {
$('.title', this).fadeIn();
$('.like_num', this).show();
var buttonDiv = $(this).children('.button');
buttonDiv.toggle();
},
mouseleave: function () {
$('.title', this).fadeOut();
$('.like_num', this).hide();
var buttonDiv = $(this).children('.button');
buttonDiv.toggle();
}
}, '.image_masonry');
});
});