I have a small problem where two masonry blocks are overlapping on load. Both blocks contain empty divs that use scripts to add content. One is instafeed to display the latest instagram image and the other displays the latest tweet. If I resize the window then they stack nicely.
I've tried using .imagesLoaded method below but that doesn't change anything. And the tweet block is just text anyway.
<script>
$(document).ready( function() {
var $container = $('#container').imagesLoaded( function() {
$container.masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
});
</script>
If I use the following this fixes it for all browsers except IE9:
<script>
$(window).load(function(){
$('#container').masonry({
"gutter": ".gutter-sizer",
"itemSelector": ".item",
"stamp": ".stamp"
});
});
</script>
I suspect it may have something to do with masonry loading before the other two scripts but I have no idea how to solve it.
Thanks for looking!
Related
When Isotop/masonry 1st loaded it get crumpled all together how to fix ? but after i refresh it it just got back to normal. Visit this link to check it live.
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Here are the instructions on how to utilize it. Isotope v2 does not include it so you need to download and load it in your page.
If your layout has images, you probably need to use imagesLoaded.
Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.
You can use ImageLoaded by adding some JS:
<script type="text/javascript" src="http://imagesloaded.desandro.com"></script>/imagesloaded.pkgd.min.js
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
I've used Dylan Baumann's GitHub repository for integrating Masonry and Foundation. It worked great in Foundation 3, but not so well in Foundation 5. On both F3 and F5 I get images stacking vertically.
For F3, I used the following JS to resize the window and stop the images stacking vertically:
$(".title").click(function () {
$(window).trigger('resize');
});
But that does not work in F5 with the following (Masonry is within a Foundation Accordion element):
<script>
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
$("#secondary div.row div.small-12.large-9.columns dl.accordion dd.accordion-navigation a").on("click", function () {
$(window).trigger('resize');
});
The markup changed for the Accordion element in F5, so the window resize target changed. I've tried many different methods, but can't get it to work.
The site in question is here - need to click on "Bilder far Adventure".
Anyone found a solution to the images stacking problem?
Ok I figured it out. Use window.dispatchEvent(new Event("resize")) instead of window resize:
$("dd.accordion-navigation a").on("click", function () {
window.dispatchEvent(new Event("resize"))
});
Works!
I am doing a content site project using Jekyll and as I was doing my research I came up with a possible answer:
I suggest you to do it The Zurb Way
I am using Isotope to place some grid elements which is working fine. Now I need to run some code on layoutcomplete so I have added the event and end up with the following code.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
...
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
});
This all works fine except that layoutcomplete is not executed on page load which is of course beacuse the event is added after init. I have then tried setting isInitLayout: false but is then having problem what to do next - I would expect that I could use .arrange() but with no luck.
Anybody who can figure out how I get layoutComplete to execute on page load?
I was pulling my hair off too because of isotope for a long time. But as much as I experienced the 2.0.1 version of it finally we got a stable plugin.
You can use the code below to layout/relayout your isotope:
$container.isotope('layout');
I recommend you to use isInitLayout: false.
Also keep in mind this, if your containers size changes and your isotope is responsive then your layoutComplete gets fired everytime when it happens. So, you may need to use once instead of on.
var $container = $('.iso');
$container.imagesLoaded(function () {
$container.isotope({
isInitLayout: false
});
$container.isotope('on', 'layoutComplete',
function (isoInstance, laidOutItems) {
...
}
);
$container.isotope('layout');
});
Cheers.
So I'm having trouble with Masonry not properly displaying images when I load a page with JQuery into the container div. I'm trying to prevent the page from refreshing for each section. The initial loading of the page works fine, but once I load a page into the div it breaks. Here is my code.
$('#container').load("photos.php?directory="+str, function () {
var container = $('#container');
container.imagesLoaded( function() {
container.masonry();
});
});
I'm even trying to reload Masonry after the images fully load in the div(I don't mind not having to do that). Any help would be greatly appreciated!
Fixed the issue. I had to load the options in JQuery instead of HTML.
$('#container').load("photos.php?directory="+str, function () {
var container = $('#container');
container.masonry('reloadItems');
$('#container').masonry({
columnWidth: 156,
itemSelector: '.item'
});
});
I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?