kombai / freewall Goto Github PK
View Code? Open in Web Editor NEWFreewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
License: MIT License
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
License: MIT License
Please add the possibility to have all the elements positioned and resized (to similar scale and preserving their aspect ratio) in a div, using divs height and width. The resized elements should have similar scale.
This should be like an overview of all the pictures in the galery. Please answer even if there is such a solution and I just could not find.
Hey, have you thought about how to implement prepending items to the wall? So the new ones would show up at the beginning of the grid?
I have an issue with the pinterest layout. Sometimes the tiles line up wonderfully but half of the times it has one full line of tiles and on the second line i only have one tile at the end.
The website sometimes doesn't load the .js file i guess. Chrome loads the script again after 1-2 sec but other browsers it stays faulty. I viewed it with Element Inspector and i saw that the ID did not take the JS parameters.
Does anyone know a solution to this? I have many .JS files but even with .noConflict it didn't work. The console does not bring up any errors.
For some reason, the rows of my elements are overlapping one another like so:
I've been trying to figure out why, but I just can't seem to find the problem. I've made a Codepen to test and it kind of works - the headings sometimes get clipped unless I resize my window and sometimes the entire elements only render 20 pixels high or are still hidden.
My original code I've loaded Freewall in the header, in the footer, tried different jQuery versions from 1.7 up to 1.10.2, tried using your code from your Pinterest-like sample on my HTML.
http://codepen.io/jarrydcrawford/full/rmBFg
If you want to see the original code, I'll have to email you the link - it's a company staging URL :)
Hello @kombai,
I've found a bug and managed to reproduce a minimal test case here
https://gist.github.com/htrex/ed984ce499daf9929ee7
basically with gutter > 0 and a cellW returned from a function freewall makes weird layouts.
when i view http://vnjs.net/www/project/freewall/
in firefox v 26 - the falling bricks do not render correctly..
some of the letters of the Free Wall text are not aligned and the F is more like a blob of white. ;)
I'm trying to use the images layout
. All the demos seem to be setting a width
for each image, but when I load an image with a url from the server I have do idea what the width is going to be. I know I want my height to be 160px
but when you only set that, you end up with a width that fills the entire container.
Any ideas on how I might go about doing this?
It is possible to integrate Lazy Load Plugin?
"Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them."
http://www.appelsiini.net/projects/lazyload
Is possible any conflict with this?
Line 573: reads "lastBlock.height += freeArra.height;"
Should be: "lastBlock.height += freeArea.height;"
When switching to a mobile device, our cells get stretch a lot and the images get distorted. Is there any way to make the grid still responsive and flexible but at the same time set break points so that if the viewer is on an iPad, for example, it won't try to make it 1 column but will keep it as 2?
Thanks again!
Hello.
Great plug in - really well written and useful. I've been trying to get a cell to be fixed at the top and be 100% wide no matter what. I've been able to get it 100% using CSS or fixed positing using data-fixpos="top-left" but not both. I tried data-fixpos="0", data-fixpos="0-0" and data-fixpos="top". Any ideas?
Thank you!
Hi, Today I just try to update freewall.js and found that onComplete is not be called anymore when I append more blocks to container.
I have to capture onComplete event to update scroll bar position for infinite item scrolling and hide loading animation div.
when I append blocks,
at line 239,
runtime.length -= 1;
will continue counting from previous value (0) to -1, -2, -3, ...
and never be 0
so line 243,
runtime.length == 0 && setting.onComplete.call(item, block, setting);
never be called.
Thank you.
Hi,
Is it possible to fix one of the boxes in a specify position? eg, the box in right hand site and fix it's position when resize the browser.
Best Regards,
Moon
You have named the method to rearrange the layout "refesh", but I wasn't sure if you meant for it to be "refresh" or not? Could either be an error or a misunderstanding!
Hi,
I stumbled upon freewall and want to use it as basis for a new website. It works perfectly with the jQuery 1.7. which is provided in the demo.
I tried it with jQuery 1.10.2 and 2.0.3 and at least the flex-layout from the demo does not work with it.
The fit-zone layout works good with 1.10.2 as well as the 2.0.3.
I hope this helps and the good work is keeping up because I am really enjoying it!
Regards
Hi Kombai,
I have a page that I use bootstrap tabs.js to toggle through different clients. Each client has an image gallery. The freewall.js works perfect for the first tab (resizes the images and position them according to the empty spaces). But when I click the tab links to see the other clients, the plugin responds but the images don't resize to fit the width and break the whole layout. I am using rails, and the clients and images, for the image gallery, are editable, so I cannot set an specific id for each. Could you help me?
Hi, thanks for the fantastic plugin - I was just wondering if it is possible to NOT load or to NOT display some of the elements, in combination with the filtering methode?
Example:
I have a "wall" of images of different categories.
Each category has a description (a short text).
On page load only the images should be visible.
The description of each category I want to show only when this category is selected.
Filtering is working fine, but I am no able to HIDE the descriptions on page load. Is there any way to do this?
Thanks for any suggestion!
Hello,
Is there a way to add an 'active' class to the filter layout? So, i'll be able to style the clicked filter nav properly.
Cheers
Any idea what could be causing that? The site with the code is at http://dev.thenuproject.com (NSFW)
I'm using freewall for my friends photography portfolio. On the front-page selected photos show up and a filter is filtering different categories.
I used the wall.filter and wall.unFilter method to do so. But i need to double click on a filter to rearange the layout.
See it here in action: http://michael-golinski.de/wordpress
For the filter look on the upper right side.
Please assist to get this working.
Thanks
Hi,
Have attempted to add support for dragging, GRIDLY is an example. Am really impressed though with your packing algorithm which seems perfect. The gutter between the blocks is causing me some problems. Any advice or thoughts welcome.
Many thanks,
Shaun
I'm expiriencic some strange behaviour in Chrome, Opera, Android Stock browser and Safari when i'm using this snippet of code:
<script type="text/javascript">
var wall = new freewall(".entry-content-flow");
wall.reset({
selector: '.thumbview',
animate: true,
cellW: 280,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.thumbview');
var length = images.length;
images.css({visibility: 'hidden'});
images.find('img').load(function() {
-- length;
if (!length) {
setTimeout(function() {
images.css({visibility: 'visible'});
wall.fitWidth();
}, 505);
}
});
It's only seems to work on a "F5" reload or when im coming from outside the domain. If i use the intern links of my page the script often fails to resize properly. On Firefox this is not really an issue.
I use your plugin inside of an wordpress installation. The Loop generates the desired markup correctly, without any height or width attributes. Disabling of all plugins shows no effect.
First, congratulations for the plugin. It's amazing.
I'm wondering if is possible to create classic layouts with 2, 3 or 4 columns? That is quite common on "portfolio" pages.
Hi,
i am using foundation 4, which either uses Zepto or jQuery, this plugin, unfortunately uses jQuery function isNumeric which doesn't exist in Zepto.js.
I replaced all occurrences with parseInt() and replaced the last line with:
})(window.Zepto || window.jQuery );
to get rid of all errors in the dev. console.
I haven't tested it further (yet) but it would be nice if the next update could work universal for other frameworks as well ...
Hi
I am trying to integrate freewall with the Google jsapi to use the charting features - making some of the blocks into charts.
I am finding that if I load the google api then freewall gets in an infinite loop.
I am including the google api
<script type="text/javascript" src="https://www.google.com/jsapi"></script>Its if I include the call the the initialialisation code:
google.load("visualization", "1", {packages:["annotatedtimeline"]});
Then Freewall gets stuck in freewall.js - getFreeArea call
in the block of code:
// find limit zone by horizon;
for (var y = t; y < minY; ++y) {
for (var x = l; x < maxX; ++x) {
if (matrix[y + '-' + x] == true) {
(l < x && x < minX) && (minX = x);
}
}
}
its looping round the "x" for loop.
Could not find any other issues relating to this.
Anyone managed to do it?
Hello -
I have an issue I am trying to resolve with your plugin. When trying to do a nested grid, if I add the data-nested attribute, it seems to break the layout function. I was wondering if this is a known bug or something I may be doing wrong, I was looking but couldn't find much documentation on the plugin. Thanks!
When running .setFilter('.some-category').fitWidth(), later followed a new by .setFilter('.some-other-category').fitWidth(), freewall don't succeed in unhiding the elements of the new filter. This was not a problem before, but using the latest version, width and height stays at 0px when changing filter.
Demo: http://jazzfest.no/beta/program/
which browsers are supported?
i don't see anything like this in the link "cross browsers"
thanks
I am using Freewall and Fancybox to display images as a gallery popup.
Specifically on the "image-layout.html", (Line 30), I can not use a dynamic "href" element for a link.
Example:
var temp = "<a href='here dynamic url' class='cell' style='width:{width}px; height: {height}px; background-image: url(galerias/galeria1/{index}.jpg)'></a>";
How I can solve this?
Thanks!
Hi Minh Nguyen,
Greetings!, It would be good if we have minimum columns to display, for example at least I would like to have 3 columns like pinterest view and minimum width for every block that we are showing, we are having content that is pixel based which so if I use fitWidth() for some screen resolutions, they came to the next line.
Is it possible to give the minimum width for the block that we are displaying? and minimum columns?
Hey, I'm really sorry if this is a dumb question, but here goes. I'm creating a simple site to display something for my pokemon colletion, and I really think Freewall is perfect. It seems to need a height property in the css to work (this is my guess as to the solution, I'm not sure it works.) Here is my code:
<html>
<head>
<title>FoD</title>
<style>
.yes {
background: #eee;
padding: 20px;
max-width: 200px;
border: 1px solid #ddd;
} .content {
width:800px;
margin:0 auto;
} .main {
margin:0 auto;
width:100%;
height:100%;
} .block img {
width:100%;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.freewall.js"></script>
</head>
<body>
<div class="content">
<div class="main" role="main">
<div class="block yes">
<img src="wantslist/friendsbig_shinyv.jpg" />
<h3>Vulpix Friends Plush</h3>
<p>Looking for it for around $30. (Image belongs to <a href="http://shinyvulpix.awardspace.biz/plush.html">ShinyV</a>)</p>
</div>
<br />
<div class="block yes">
<img src="wantslist/tomykeychainbig_shinyv.jpg" />
<h3>Vulpix Tomy Keychain</h3>
<p>I'm not quite sure the approximate value of this. (Image belongs to <a href="http://shinyvulpix.awardspace.biz/figures.html">ShinyV</a>)</p>
</div>
<br />
<div class="block yes">
<img src="wantslist/marblebig_shinyv.jpg" />
<h3>Vulpix Marble</h3>
<p>Looking for any color for around $2. (Image belongs to <a href="http://shinyvulpix.awardspace.biz/misc.html">ShinyV</a>)</p>
</div>
<br />
<div class="block yes">
<img src="wantslist/ninetalesmarble_whitewolflarka.jpg" />
<h3>Ninetales Marble</h3>
<p>Looking for any color for aroung $3 (Image belongs to <a href="http://cinnabarsburningpassion.weebly.com/ninetales.html">whitewolflarka</a>)</p>
</div>
<!-- THERE'S LIKE TEN MORE HERE -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var wall = new freewall(".main");
wall.reset({
selector: '.yes',
animate: true,
onResize: function() {
this.fitWidth();
}
});
wall.fitWidth();
});
});
</script>
</body>
</html>
Here is a picture of what shows up:
http://fc08.deviantart.net/fs70/f/2014/049/d/3/screen_shot_2014_02_18_at_9_14_40_pm_by_felinecasanova-d77307m.png
Thanks for any help. I'm a fairly terrible coder (only 14) and yeah, this seems like a great plugin.
Nice Project!
Is there any possibility to integrate drag & drop support like gridster.js? (http://gridster.net/)
The combination of both technologies would be truly awesome!
When dragging and dropping, the order of the items are not maintained. Is there anyway to make items remain in the order and position they are dropped?
Hi kombai,
I have set the cellW and cellH to 160px in the wall setting.
And in the wall i have set some cells to size of 320px x 160px / 160px x 320px
But when i resize the browser, the bricks will auto resize to 160px x 160px.
Is there any way for me to fix the size of those bricks?
Best Regards,
Moon
Hi.
I know this is not a freewall issue, but I would really appreciate your help. I'm bulding a portfolio WordPress plugin https://github.com/danielzilli/theux-portfolio that uses freewall.js. For some reasons, it seems not work well. Some examples:
http://theux.co/naree/layout-flexible-grid/
http://theux.co/naree/layout-filter/
Any help?
Thank you alot.
Hi, thanks for the fantastic plugin - I was just wondering if there was an easy way to change the default filter from "all" to one of the custom data-filters? So for example if I have:
I would like the Freewall to filter only "Reds" on page load, and not "All colours" - is that possible?
Thanks again!
Hello.
Is there a way to make the filter layout smoother? Would be nice to have some kind of transitions on the filter.
Cheers
Thank you for the wonderful plugin :)
Hi,
I would like to have the function to reposition the items in the pinterest-like view in jquery.freewall. Basically I am implementing the filters to filter some of the div according to its content (like free text search). When I do that, I can able to hide (display:none) the items but the items are not repositioned to the top.
I know this is because freewall using position:absolute to position the items. If I use position:relative and comment the line number 272 and 273 //top: -- and //left: -- values. the blocks repositioning correctly but the blocks are not stacked one by one (there are some gaps between rows).
Is there any other way to achieve this using your plugin?
your help will be appreciated!!!
Hi Minh,
I hope i'm not bothering you with my questions ;-)
I see that you use background-image for your image layout http://vnjs.net/www/project/freewall/example/image-layout.html. In my case, I use the img element. As you can see here http://theux.co/naree/layout-image/ it does not resize the images, as it happens on your example. Any ideas?
Cheers!
Hello,
I have a problem with grid display on different resolutions.
This is what I get when I want to display 2 tiles on a big resolution (1920*1060) :
And the same thing on a lower resolution (1280*768):
I have no idea on what's going on. I am doing this the same way as it's describe in the documentation and examples. Any help?
Thanks a lot!
Hi
I'm trying to use the freewall script with paul irish's infintie scroll script. Unfortunately I can't get it working.
Did anybody do this in the past and can give me some help?
Right now, the scrolling will work, but the freewall won't refresh and rearange the layout. The new elements will append like the freewall script isn't working.
Is it possible to align the images to the top center rather than the top left?
I've set up an image strip across the page (as a section divider). It's 200-pixels tall and 100% wide. Freewall is working out really well for this on most size screens. But on a really wide monitors (like my giant 2560x1440 monitor), I run out of images to fill the space.
Is it possible to make the freewall block align to the center? Right now, the images start on the left side, and then fill in until they run out. And I'd rather have the whitespace be even on both sides instead of it be all on the right.
The fallback plan (as much as one exists) is to set a max-width on my freewall div and then center that. And that max-width number will be whatever it takes to fit all my images.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library kombai/freewall
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "kombai/freewall",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hello,
We have just add Freewall to twittstrap resources list
http://www.twittstrap.com/resources/details/freewall
Under : Javascript
Regards
I have a wall of images with 3 image sizes (medium, large and x-large). The wall needs a div to appear in that wall.
When I add a DIV brick into my freewall layout โ and the wall container is made small โ the x-large images become too small and have improper heights.
In the following example, the Black-&-White images are supposed to be x-large. Resize wall container frame to mobile size (~400px width) and notice the Black-&-White (x-large) images have moved to the bottom of the wall and have improper heights.
http://jsfiddle.net/level39/eVb8g/
The expected behavior is for those x-large images is to display full-width, since they are of x-large size/importance.
Removing the problematic DIV brick (colored red in that layout) seems to fix the width issues on those x-large images, but the height issues remain.
I am trying to use ImageLoad plugin instead of this:
[code]
var images = wall.container.find('.brick');
var length = images.length;
images.css({visibility: 'hidden'});
images.find('img').load(function() {
-- length;
if (!length) {
setTimeout(function() {
images.css({visibility: 'visible'});
wall.fitWidth();
}, 505);
}
});
[/code]
Because the images are dynamic and when loading or loaded on completion, nothing shows up. Just a blank template.
ImageLoad plugin:
[code]
jQuery( document ).ready(function( $j ) {
imagesLoaded('#popup-freewall', function(){
var wall = new freewall("#popup-freewall");
wall.reset({
selector: '.grid-container',
animate: false,
cellW: 200,
cellH: 'auto',
fixSize: 1,
gutterX: 20,
gutterY: 20,
onResize: function() {
wall.fitWidth();
wall.refresh();
},
});
wall.fitWidth();
});
});
[/code]
The problem is that the images will not lay out nicely like pinInterest demo. The images would shift away in a large gap space from right side then after loading on completion, they would shift back to the right.
Is there any way to resolve this ? Any help appreciated
Hi all,
checking and trying out the appendMore feature is producing a type error.
To reproduce:
$.get("/posts/getMoreRandomPosts", {page: page}, function(data) {
if (data != "")
wall.appendBlock(data);
is_rendering = false;
});
The data object is pre rendered plain html containing only divs.
StackTrace::: TypeError: style is undefined
} else if (style.webkitTransition != null) {
freewall.js (Zeile 455)
cheers.
Hi,
I have been using your script to make a pinterest like layout. I have used it with no problem if it's the first time the image is loaded, but if the windows is resized, some height of the '.brick' went wrong so some text under the image is outside the '.brick' and sometimes collide with the other below it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.