-
Notifications
You must be signed in to change notification settings - Fork 375
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pinterest like layout cellH: 'auto' #20
Comments
Could you give me the link for view please ? |
you can use the demo that you provided here : |
got it, will fix soon. |
Hi, I just notice this problem today after I upgrade to 1.03, too. 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. Please note look like this work for me, not well test though. |
@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 ) |
Ok just fixed it by release the height of block before get it again. |
For .infor you can using position: absolute, bottom: 20px; |
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 |
you can wrap the text in a div, then set it with bottom: 0px; |
yes, you can using event onShowBlock to reset the image height. wall.addCustomEvent("onShowBlock", function() { $(this).find("img").height($(this).height()); }); |
Hello, |
Really cool! |
@kombai thanks, for the fix. by the way is it possible to add a feature like infinite scroll / load more button? @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 |
@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); } }); |
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. |
the order index stored at the id attribute or data-delay too. wall.addCustomEvent("onBlockLoad", function() { console.log($(this).attr("data-delay")); }); |
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" |
you can't get it before append to layout. Btw, when you using onBlockLoad you can control it.
About the format id: first number- second number |
thanks for the help, now it's working like what I want, 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 |
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? |
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. |
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. |
@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? |
http://api.jquery.com/jQuery/#jQuery2 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(). 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) { //Add onLoad & onError handler to wait for all images within allBricks loaded, append to freewall, refresh layout like I do in previous example. |
Hi kombai, I'm trying to load Instafeed into Freewall any advice |
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.
The text was updated successfully, but these errors were encountered: