Documentation - Githubissues

daniftinca commented 8 years ago

Please add a better documentation. I am trying to figure this thing out for 2 days already.

drawcard commented 8 years ago

What are you trying to figure out exactly? You can probably work it out by right clicking on one of the demo pages and taking a look at the source code.

daniftinca commented 8 years ago

my boss wants me to use this and i have no idea how. I got it working eventually but it is still buggy. The images load in a diffrent order on mozilla and chrome and the second of my 2 galleries loads with images of random widths and heights, over the next element. Than they go back on the slightest width or height change (including when i click on inspect element).

drawcard commented 8 years ago

Can you post a screenshot? Or share some code?

daniftinca commented 8 years ago

ok. right when i load the page the galleries are all crammed up and over the rest of the content like in screen1. After resize they all go back to their original position

Screen1: screen1

Screen2: screen2

drawcard commented 8 years ago

Looks like you might need to write some CSS rules to constrain the sizes of each panel, so Freewall has something to work with. I usually set a common width for all elements and leave the height variable.

Also check your code for the usual things like unclosed DIV tags, or dodgy CSS rules that are causing things to break. It appears that Freewall itself is working, but it just needs some styling. PS - I'm not the dev, I am just a guy using it in projects too :)

drawcard commented 8 years ago

Actually ignore all that sh*t I just wrote.

I think the problem is that Freewall isn't being fired on page load, but it is whenever you resize the page.

Can you post the JS you're using to trigger Freewall, ie. the Jquery code?

natyconnor commented 8 years ago

I also think there definitely needs to be better documentation for this tool. It's powerful, but all the examples are with divs of set height, which isn't that useful of a case. I'm having an issue with getting the following:

bad freewall

Without freewall it's pretty much what I want:

good wall

But I'd love to use the filtering provided by freewall. I would think code like this would work:

requestWall.reset({
        selector: '.request-cell',
        animate: true,
        cellW: 'auto',
        cellH: '100',
        fixSize: false,
        onResize: function() {
            requestWall.fitWidth();
        }

but that height doesn't work and they're overlapping each other horizontally for some reason. I've tried setting heights and gutters and nothing ever really works. Some more practical, real world cases where the content isn't just a colored box would be really useful for using this otherwise awesome tool.

daniftinca commented 8 years ago

@drawcard here is the code i used for it:

$(document).ready(function() { $(function() { var wall = new freewall("#freewall"); wall.reset({ selector: '.item ', animate: true, gutterY: 0, gutterX: 0, onResize: function() { wall.fitWidth(); } }); wall.fitZone(); }); $(function() { var wall = new freewall("#freewall2"); wall.reset({ selector: '.item2 ', animate: true, gutterY: 0, gutterX: 0, onResize: function() { wall.fitWidth(); } }); wall.fitZone(); }); });

Some edits. I have 2 galleries. Last time i posted both of them would be squashed together randomly. Now the first one loads but the second one still floats around above the rest of the page. I have no idea what caused it because I was woroking on a diffrent thing while it happened.

here is the html for the first gallery :

`

<?php $freewall = get_field("freewall_items");

                foreach($freewall as $item){
                    ?>
            <div class="item" data-width="<?php echo $item['width']; ?>" data-height="<?php echo $item['height']; ?>" keepOrder="true">
                <?php if(!empty($item['g1_bg_image'])){ ?>
                    <div class="img_item" >
                        <img src="<?php echo $item['g1_bg_image'];  ?>" alt="bgimg" /> 

                    </div>
                    <?php if(!empty($item['g1_image_logo'])){ ?>
                        <!--<div class="img_item-logo">
                            <img src="<?php echo $item['g1_image_logo']; ?>" alt="logo" />

                        </div> -->
                        <?php } ?> 

                            <?php } else { ?>
                                <div class="text_item">
                                    <center>
                                        <img src="<?php echo $item['g1_image_logo']; ?>" alt="logo" />
                                        <h2><?php echo $item['title'];?></h2>
                                        <?php echo $item['text']; ?>
                                    </center>
                                </div>
                                <?php } ?>
            </div>
            <?php
                }

            ?>
    </div>`

and here is the second gallery:

`

      <?php $freewall = get_field("gallery_items");

            foreach($freewall as $item){
                ?>

                <div class="item2" data-width="<?php echo $item['width'];?>" data-height="<?php echo $item['height']; ?>" >

                    <img src="<?php echo $item[image];?>" alt="img" /> 
                </div>

        <?php    } ?>

  </div>`

Edit: Here is a quick fix i used (don't know if it is the best one):

I put $(window).resize(); in the freewall function that wasn't loading at page start.

jaimz22 commented 7 years ago

@drawcard suggesting someone look at the examples is kind of crap to be honest.

I did find this http://kombai.github.io/freewall/#options

drawcard commented 7 years ago

@jaimz22 what exactly do you mean? That's how I learnt to use Freewall. It's not the best method of course but when the docs don't explain anything better, it's all you have to go on.

kombai / freewall

Documentation #202