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
});
});
});
Related
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!
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'
}
});
});
Here is the site.
When I resize my window, the layout isn't triggered. So after I resize, I have to refresh the browser in order to see the reconfigured layout. I looked through the Masonry docs and found this page which I think describes my problem: http://masonry.desandro.com/methods.html#bindresize
$container.masonry('bindResize')
However, I'm not sure where I'm supposed to implement it. Below is the code that I'm currently using.
if(jQuery().isotope) {
$container = jQuery('#masonry');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.item',
masonry: {
columnWidth: $(document).width() > 1035 ? 240 : 320
},
getSortData: {
order: function($elem) {
return parseInt($elem.attr('data-order'));
}
},
sortBy: 'order'
}, function() {
// Isotope Chrome Fix
setTimeout(function () {
jQuery('#masonry').isotope('reLayout');
}, 1000);
});
});
// filter items when filter link is clicked
$container = jQuery('#masonry');
jQuery('#filter li').click(function(){
jQuery('#filter li').removeClass('active');
jQuery(this).addClass('active');
var selector = jQuery(this).find('a').attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
}
Can someone help me out?
if(jQuery().isotope) {
$container = jQuery('#masonry');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.item',
masonry: {
columnWidth: 240
},
getSortData: {
order: function($elem) {
return parseInt($elem.attr('data-order'));
}
},
sortBy: 'order'
}, function() {
// Isotope Chrome Fix
setTimeout(function () {
jQuery('#masonry').isotope('reLayout');
}, 1000);
});
});
// filter items when filter link is clicked
$container = jQuery('#masonry');
jQuery('#filter li').click(function(){
jQuery('#filter li').removeClass('active');
jQuery(this).addClass('active');
var selector = jQuery(this).find('a').attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
//added this line
jQuery(window).resize(function(){jQuery('#masonry').isotope('reLayout'); });
}
I have just added a single line in last and it will work.
Did you tried to insert the bindResize Snippet after your $container var?
// filter items when filter link is clicked
$container = jQuery('#masonry');
$container.masonry('bindResize');
jQuery('#filter li').click(function(){
...
}
The bindResize method should triggered on the Resize-Event so you don’t need to add it to the event manually. But the Amit’s solution should work too. But can you please remove the refreshing on the demo-site on resize? i can’t really test anything there.
I am using the following code to trigger infinitescroll on isotope masonry, however how do I use the "Click to load more posts" instead, "the manual trigger". I tried implementing from solutions on the internet but they do not work for me. Thanks.
/*--------------------------------------------------------------------------------*/
/* infinitescroll
/*--------------------------------------------------------------------------------*/
jQuery(document).ready(function($) {
var $container = $('.masonry');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.item'
});
});
$container.infinitescroll({
// selector for the paged navigation
navSelector : '.post-nav',
// selector for the NEXT link (to page 2)
nextSelector : '.post-nav .prev-post a',
// selector for all items you'll retrieve
itemSelector : '.item',
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function() {
$newElems.animate({ opacity: 1 });
$container.isotope( 'appended', $( newElements ) );
$container.isotope('reLayout');
});
});
});
Assuming that you're using this plugin, the following should work to manually trigger a retrieve:
$container.infinitescroll('retrieve');
What I should add to this script for running in head. When I put in the end of body it run well. I think this is due to the fact that the script starts before images are loaded. Example http://masonry.desandro.com/docs/intro.html
<script>var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 300
});
});
</script>
The body (also the container) doesn't exist when the code will be executed. In the head you should wrap your code in a $(document).ready(function() { ... });:
<script>
$(document).ready(function() {
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 300
});
});
});
</script>