Comments (28)
Could you give me the link for view please ?
from freewall.
you can use the demo that you provided here :
http://vnjs.net/www/project/freewall/example/pinterest-layout.html
try to minimize the windows to half the screen size then maximize it again, and the result will be like this
from freewall.
got it, will fix soon.
from freewall.
Hi, I just notice this problem today after I upgrade to 1.03, too.
I think 1.02 works without this problem.
Also, append items to pinterest layout brokens.
I have try to change line 592, as a workaround for now.
//Calculate block height from item's actual height, not form free area's.
if('auto' != setting.cellH) {
// for fitZone;
block.height = Math.min(block.height, freeArea.height);
}
Please note look like this work for me, not well test though.
from freewall.
@PreechaJ it's working better if you change that line, but the same problem still occurs when given the same treatment ( minimize windows > reduce windows width until half of screen width > maximize it again )
from freewall.
Ok just fixed it by release the height of block before get it again.
see it line 79
https://github.com/kombai/freewall/blob/master/freewall.js#L79
from freewall.
thanks for the fix, it works perfectly, but now I have another issue, for some image the padding for the .info doesn't work.
here's the screenshot :
from freewall.
For .infor you can using position: absolute, bottom: 20px;
from freewall.
can't use it. When I add position: absolute, bottom: 20px; to '.info' class, the text will appear 20px from the bottom of the image, '.brick' height will be the same with '.info' height if I add the position: absolute
from freewall.
you can wrap the text in a div, then set it with bottom: 0px;
from freewall.
Hi, sorry for my late reply, I was sick before.
I have wrapped my text in div '.info', and I have succedded to make the margin for the text by changing the '.info' position to relative before fitWidth() and change it to absolute after the fitWidth() is finished.
But there's still some unknown gap between the image and the div '.info'
I tried to show the image only, and there's a gap in the bottom of '.brick' with the image for some of the image
is it possible to remove those gap?
from freewall.
yes, you can using event onShowBlock to reset the image height.
wall.addCustomEvent("onShowBlock", function() {
$(this).find("img").height($(this).height());
});
from freewall.
Hello,
Freewall have next update for fix this issue, please check it.
Best
from freewall.
Really cool!
I just try this version and it works perfectly.
This version also solves my previous problem when I try to append more items to pinterest layout, too.
from freewall.
@kombai thanks, for the fix.
by the way is it possible to add a feature like infinite scroll / load more button?
I've been using a repeater inside an update panel for this, for the first load it looks perfect, but after I click the load more link, the image didn't fit the width of the container, it just stacking below the other image.
I have added ewall.fitWidth(); when the update process finished, but the problem still persist
@PreechaJ can you share what did you use to append more items to pinterest layout? I've been searching for it for about 4 days, but still don't know what to do
from freewall.
@Kyojimaru, before arrange layout you must let the image loaded first, same I did here:
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); } });
from freewall.
I see, i just found that one but by recalling the whole code for Pinterest Layout, I'll try it again with just the image.load only.
But I want to show the added item after the images is loaded, how can I get to know if the image is the 1st until the 20nd and so on? or how to get the data-delay?
from freewall.
the order index stored at the id attribute or data-delay too.
wall.addCustomEvent("onBlockLoad", function() { console.log($(this).attr("data-delay")); });
from freewall.
is it possible to get the "data-delay" before the
images.find('img').load(function() {});
I don't know how to use the id because the first time it loaded, the id is "1-2 until 20-2" and the next time it loaded it's "1-3 until 40-3"
Edit : I need to make the visible of the new set of images (eg: 21th - 40th image) to hidden and the 1st - 20th keep visible until the the image is loaded and made all the images visible
I've tried to use this :
images.find('img').on('load', function () { alert(images.attr('id')); --length; if (!length) { setTimeout(function () { images.css({ visibility: 'visible' }); $('.info').css({ position: 'relative' }); ewall.fitWidth(); $('.info').css({ position: 'absolute' }); }, 505); } });
but the alert keep showing "1-3"
from freewall.
you can't get it before append to layout. Btw, when you using onBlockLoad you can control it.
The time line of events:
- onGridReady => the layout finish to estimate unit/ total rows, total columns.
- onBlockLoad => happend when earch block adjusted size base on unit width/ unit height.
- onGridLoad => all block adjusted
- onGridArrange => when all block arrange to layout, but them still haven't show up
- onBlockShow => for each block show up, right now you can see it on web page
- onGridShow => when all blocks show up.
About the format id: first number- second number
the first number is the index of block on layout.
the second number is the instance number of freewall. You don't need using this, I using for support more than Freewall on one web page.
from freewall.
thanks for the help, now it's working like what I want,
and if you can, maybe you want to add this code
images.find('img').on('error', function () { --length; });
before
images.find('img').load
to prevent the image not showing if by chance there's any image with error link
from freewall.
hi, I've got another question. I have changed my code to use your
wall.appendBlock(html)
command, did the image will be reloaded every time a new item is appended? because the more I append the image, the longer it take to load. and if it will always be reloaded every time I append new item, are there any workaround for this?
from freewall.
no, infact you need add html to DOM first, wait for image loaded then using wall.appendBlock(items). Or you can pre set width/ height of image.
from freewall.
The pinterest layout need special logic to work with. So wall.appendBlock(html) alone can't do the job.
In other layout, freewall can calculates and adjust items' size by determine setting you pass to reset(), but with pinterest layout, freewall has no idea how tall each item is before image already loaded, so what you have to do is to monitor for all images to be loaded before telling freewall to refresh it layout.
See how the link with id 'add-more' works here.
Hope this help.
P.S. I don't hide image first, because I don't want to make user wait for long time for all images to loaded before show.
I prefer the animation while items rearrange them self, you can also make some animate gif image holder first and then replace it with your real image after loaded.
I just do it base on pinterest example, you can easily load your items by jquery ajax.
from freewall.
@PreechaJ thanks for the help 😄 , now it's working better than before. btw, what is the meaning of
var brick = $('html');
at the getBrick, and how does it differ with the plain html?
from freewall.
http://api.jquery.com/jQuery/#jQuery2
It is the way to create dom on the fly, if you don't already know, and then you can do jQuery magic with the result it return.
It should works both way, but if you concern for performance, then I'm sorry I really don't know which one is better.
It just about creating dom on the fly for many pieces and then sum up for the final result you want at loadMoreBricks().
or just create only string at the getBrick(), and then sum up strings and pass it to $(html) only once at loadMoreBricks() to create final result if you want.
Any way, that is just an example. In real life, you might load your html via ajax, then your best approach should be like this:
$.get(url, function(html) {
var allBricks = $(html); // You should already return the whole html of bricks here, so just do this.
//Add onLoad & onError handler to wait for all images within allBricks loaded, append to freewall, refresh layout like I do in previous example.
});
from freewall.
Hi kombai,
I'm trying to load Instafeed into Freewall any advice
from freewall.
layout disorderd after removing images+
from freewall.
Related Issues (20)
- Keep tile ratio HOT 2
- fixSize: 0 not always keeping ratio HOT 2
- ImagesLayout + Filter = Impossible?
- Need data-position on block HOT 1
- Using Freewall with Media Queries/Breakpoints
- vnjs.net down? HOT 6
- Freewall with Easy Tabs
- Preview website not working HOT 2
- Wall extends beyond right edge when fitwidth is used HOT 1
- Square pictures get oversized
- Gap to the right of the grid.
- how can set freewall with bootstrap 3 ?
- Problem with right to left
- Wall items drops off over edge when using col-12
- Boxes that take up more than the visible columns disappearing
- Positioning of tiles broken in specific width
- Freewall Plugin
- On Drag do not push out / knock out other elements. Only swap with final item?
- Can Freewall make the grid as 2/3 , and 1/3 in grid?
- Lazy Loading Images On Scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freewall.