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
Related
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!
I'm using isotope to create a filter feature. But the entire isotope container needs to be hidden on the initial page load, and visitor will have to click on a button for the container to show.
I have the filter working, but when you click on the button, the first time the container loads, all items are on top of each other, then when you click on either one of the filters, everything falls into place.
You can see my code here - http://chrsdev.com/test.html
How can I fix the issue of all items positioning on top of each other on the initial content load?
Would greatly appreciate it if someone can point me in the right direction.
Download imagesloaded.js and add the script to your page. (Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue)
Then call isotope like this:
//Initialize isotope on each container
jQuery.each($container, function (j) {
this.imagesLoaded( function() {
this.isotope({
itemSelector : '.element-item'
});
});
});
ADDENDUM
The issue is with your each function and "this". Try this instead.
//Initialize isotope on each container
jQuery.each($container, function (j) {
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.element-item'
});
});
});
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?