Stack Overflow
Stack Overflow

Questions tagged [freewalljs]

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.

How it works

Based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scaning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).

Official Website

http://vnjs.net/www/project/freewall/

18 questions
2
votes
0 answers

Freewall grid in mobile

Hello guys I need help with this plugin. I've got these plugin settings: jQuery(document).ready(function(){ var wall = new Freewall("#freewall");; wall.reset({ selector: '.brick', animate: true, cellW: 300, …
Sidas
  • 81
  • 1
  • 10
1
vote
0 answers

Freewall.js: Mobile Bug, Object vanishes

https://codepen.io/bobbygee/pen/GRJLmJX I have a 2x1 item that vanishes in the mobile view. cellW: 300, cellH: 300, It must have to do with the Cell Width or Height. Does anyone have advice how to fix this? Thanks.
bobbygee
  • 11
  • 4
1
vote
0 answers

freewall not working when page is refreshed without clearing cache

I have a problem using the freewall.js library in my ASP.net website. When i refresh(F5) the page the freewall is not working and my images are just aligned in a list under each other, but when i refresh with clearing cache(Ctrl+F5) or navigate to…
Rens
  • 11
  • 4
1
vote
0 answers

FreeWall nested wall tile size

I am using FreeWall to create a grid that is supposed to be like this: Layout sketch: This is my current HTML:
Stef v.d. Wel
  • 11
  • 4
1
vote
1 answer

freewall.js plugin works only after resize

So, I'm testing this awesome jquery plugin called freewall.js. It seems to work absolutely fine, however, only after resizing the page. On first load, the blocks appear too close to each other in a really messed up fashion. A little resize on the…
Joe R.
  • 13
  • 2
1
vote
2 answers

freewall.js Jquery plugin : not working on first page load

i'm using the freewall jquery plugin (http://vnjs.net/www/project/freewall/) for a page having a grid style layout... on IE and firefox everything works fine. the plugin is called when the page loads (or when the browser is resized) and the content…
Dog
  • 647
  • 1
  • 9
  • 28
1
vote
0 answers

Trying to put Freewall grid layout into popup modal window

I have a page with the image linked to modal popup (Magnific Popup) and this part is working fine. I put flex-grid.html layout inside of modal element from here: http://github.com/kombai/freewall/tree/master/example Here is the part of code from my…
Alexandra
  • 11
  • 2
0
votes
0 answers

How to set position of a block at top-right with freewall.js?

I am facing a problem with freewall.js. I want to set the position of a specific element at top-right, but the only options i found in the docs are for top-left positioning.
StaXter
  • 201
  • 2
  • 16
0
votes
0 answers

Freewall.js only loads after resize

I'm using freewall.js for displaying a grid on my frontpage. But it doesn't work correct. It only loads after resize. And also after the resize it calculates false heights and puts some objects on other places where they shouldn't be. Here's my…
StaXter
  • 201
  • 2
  • 16
0
votes
2 answers

How to create Angular directive for Freewall jQuery Plugin

I need to execute some jquery in directive, im new in angular and i don`t know how to do this. var temp = "
"; var w = 1, html =…
Vasko Vasilev
  • 29
  • 2
0
votes
1 answer

What does this one do: w = 200 + 200 * Math.random() << 0;

var temp = "
"; var w = 1, html = '', limitItem = 49; for (var i = 0; i < limitItem; ++i) { w = 200 + 200 *…
user3856437
  • 2,071
  • 4
  • 22
  • 27
0
votes
2 answers

Show content when hovering over div in CSS

I am using Freewall JS plugin to generate a mosaic image grid. I am also applying a background overlay color with opacity: 0.7 and when you hover over it, the background overlay color becomes clear with opacity: 0.2 I also have content inside each…
Halnex
  • 4,242
  • 12
  • 49
  • 102
0
votes
1 answer

Freewall.js multiple pinterest layout on one page

I try to use multiple pinterest layout on one page, not nested, only several, with freewall.js. Each div I want to apply the layout has a .free-wall class and each brick has a .brick class. I tried to adapt the nested layout, but does not work. All…
Emi Coma
  • 1
0
votes
1 answer

Combining freewall.js and fancybox.js for clickable enlarged images in a Rails project

I am working on a gallery where I would like to display the images using freewall.js the only issue is that freewall.js does not include the ability to enlarge images on click. So I added fancybox.js which took fenaggling to connect as you need an…
Juan Pablo Ugas
  • 1,085
  • 9
  • 22
0
votes
2 answers

Freewall jQuery Plugin - Viewing on mobile, certain tiles get width set to zero

I'm having some trouble with the Freewall jquery plugin, which is rather odd. Basically, when I load the page on anything with a screen size over roughly 580px, the grid works absolutely fine. If, however, I load the page on a mobile device screen…
c0d3n4m3
  • 75
  • 2
  • 15
1
2