kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Not working on Tablet and Smartphone #118

Closed fv0 closed 10 years ago

fv0 commented 10 years ago

Hey there,

I'm using Freewall on a client website and I'm experiencing some issues. Here's the link to website: http://www.kosima-haus.de/?page_id=35.

If I resize the browser window manually on my Mac everything goes well, but when I open the website on my tablet or smartphone for testing purposes (both running Chromes latest version, stock Android browser doesn't work either). I see the images loading for a short second and then just nothing loads and the page stays blank.

At the bottom of my DOM just before the closing html- and body-tags I've got this wrapped in <script> tags:

var wall = new freewall("#gallery-1"); // ID of Wordpress gallery
        wall.reset({
            selector: '.gallery-item', // Wordpress class name
            animate: false,
            cellW: 150,
            cellH: 150,
            gutterX: 1,
            gutterY: 1,
            onResize: function() {
                wall.refresh();
            }
        });
        $(window).trigger("resize");

Anyone know how to fix this? I would like to achieve this kind of layout: http://vnjs.net/www/project/freewall/example/grid-layout.html

Another thing:

Sometimes my footer gets displayed in the middle of the page. If I reload the page I see the same result but if I click on a link to the page the overview of thumbnails seem to be already loaded and the footer is positioned on the bottom beneath the thumbnails. I assume this has to do with thumbnail content being loaded after the footer thinks it knows where the "bottom" of the page is. Any tips on this issue?

Thanks to all willing to help.

kombai commented 10 years ago

Hi, In the small phone I think your site using small images. So please try with this setting for mobile:

wall.reset({
  ..
  cellW: function(width) {
    return width/8; // because at your site you seted item is 12%;
  },
  cellH: 40
});

For your footer-bottom:

.footer-bottom {
   position: fixed;
}

Best

fv0 commented 10 years ago

Thanks a lot for your work and support, but due to time constraints I chose another gallery plugin.

Hi, In the small phone I think your site using small images. So please try with this setting for mobile:

wall.reset({ .. cellW: 40, cellH: 40 });

Best

— Reply to this email directly or view it on GitHub.