kombai / freewall Goto Github PK

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

HTML 59.82% CSS 6.72% JavaScript 33.46%

freewall's People

Stargazers

Watchers

Forkers

greggman celinekate exexzian benji87 zmilan nicopenaredondo asdesignee yuzurukusugo jkso swader vasconce7os satya-ak romuloctba re-enter-rupok toshioshio jelver mrhung91 focusjs bluinfaccia ahmadawais erikafleck jarc100 oantoniojr gjacob08 ottomanh eremez llerosa tyidnet sathishkpm leison elbbub johnyjamma93 flayzeraynx axelrigaud onasusweb qq40660 hadryan strml songzhichao pawelmarc maharjanajannel katikato pateljatin mdenisov rigillamas adoweb digitalcoder naruco asmshaon fritoebola sloppyzz felipeands ciptard nvdnkpr dropin mikepirch lifedna zigzag968 hirisk akumagio vinchu cocus-es awesome bestjs anurajricky cmono durone yajinn subrinar travisco dspaudio melstone nacho87 grouplat bstavenuiter oligoform wir jamesfirass imclab gfxmotion mohsenvand yashilanka ncgordan uniasha pouyachaka zaptronic atulbhujbal iohansson wimarbueno jantf9905 rhe24 unikneeraj gerhobbelt dev-gitter austenallred kislovskij gaecom morefun0302 tsmhome seekmas

freewall's Issues

Pinterest like layout cellH: 'auto'

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.

Adding an 'active' class to the filter layout.

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

Fix box position

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

Freewall and Wordpress

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.

Classic layouts

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.

Presence of DIV causes improper layout when wall container is small

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.

Seems to need a height (css) to work?

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.

Minimum width and Minimum columns

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?

Align images to center?

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.

Drag n drop

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?

Pinterest layout not working properly

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.

Nested Grid

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!

Working on all tabs

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?

Background images vs img element

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!

Hiding elements on loading, showing them with filters

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!

Freewall not fully compatible with jQuery 1.10.2 or newer

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

Repositioning the items when Items are hidden

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!!!

Strange Behaviour of the "pinterest style" code snippet on Opera / Chrome

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.

Filter needs a double click

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

the falling brick effect on your site's homepage is broken in firefox

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. ;)

Filtering broken: don't unhide previous filter

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/

Freewall added to twitstrap resources

Hello,
We have just add Freewall to twittstrap resources list
http://www.twittstrap.com/resources/details/freewall
Under : Javascript
Regards

sizing bug with gutter

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.

Freewall and infinite scroll

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.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of kombai/freewall!

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!

Sortable

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!

Breakpoints for columns?

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!

Below a certain threshhold data-total-row equals 1, data-wall-height + data-wall-width both equal 'infinity'

Any idea what could be causing that? The site with the code is at http://dev.thenuproject.com (NSFW)

any experience of integration with google chart api?

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

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?

Misspelled var in source code

Line 573: reads "lastBlock.height += freeArra.height;"

Should be: "lastBlock.height += freeArea.height;"

Freewall Image Layout + Fancybox Plugin: Problem

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!

FixPos to make cell stay on top and be 100% width

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!

Freewall + Lazy Load Plugin

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?

Fire onComplete event with appendBlock

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.

Animation for the filter layout

Hello.

Is there a way to make the filter layout smoother? Would be nice to have some kind of transitions on the filter.

Cheers

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.

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.

Freewall not working with Zepto.js (Foundation)

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 ...

Tiles in last row get stretched

In some cases, the last tile(s) get stretched, like in this example:

Tiles should always preserve their aspect ratio but in this case a squared tile gets stretched. See width x height:

I can provide more debug info if needed.

Issue with different screen resolutions

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!

cell size

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

Misspelled Method: "Refresh"

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!

appendMore TypeError

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.

ImageLoad plugin causes the freewall images to shift from right side

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

Attempt to add Drag and Drop support?

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

Support for prepend items

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?

Pinterest-like layout issue with positioning.

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 :)

Image widths

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?

Can I add images using css?

Beginner here, be warned.

This is my first time toying around with flexible grid layouts, so I am starting from the basics. I followed the directions for "Getting Started" and would like to replace the colored bricks with images.

Can I do this through css? Here's a screenshot of my layout.

Thanks!

Cross browsers?

which browsers are supported?

i don't see anything like this in the link "cross browsers"

thanks

Changing default filter

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:

All colours

Reds

Blues

I would like the Freewall to filter only "Reds" on page load, and not "All colours" - is that possible?