Comments (13)
Hey @PetPal
My suggestion would be to use background-images on your elements. Set the background-size property to cover and you will be all set. This does work and has been done before.
If you use the raw image element you're gonna have a bad time, this is because Image elements tend to stick to their dimensions and don't like to be stretched and scaled like that. So by using CSS you can achieve exactly what you're looking for.
Cheers
Drew
from mason.
Hey @DrewDahlman
I willl try to use images as background and see if that would work, however the bigger problem is filling the gaps, mason.js seems to duplicate the images multiple times in order to fill in empty spaces, how can I overcome that?
Do you have any examples that uses images and do same (or similar) to what I need? thats the farest i could get: http://petpal.co.il/test/fluid.html
Thanks
from mason.
any news ?
from mason.
Hi @PetPal So mason needs to have elements that are used in filling in the gaps. You can specify this by using the filler argument -
filler: { itemSelector: '.fillerBox', filler_class: 'custom_filler' }
What I suggest is setting up a hidden div that holds elements to use as fillers. Depending on how you've got it setup and what you're using to create the divs - this can be done quite easily. Give those elements a class of .fillerBox or what ever you want to call it and make sure you setup the filler arguments to match.
When Mason creates the grid it will use those elements as fillers.
from mason.
The thing is that i want to fill in the gaps in another way rather than adding elements, thing is that I do not have any 'spare' images to fill the gaps in - so what im looking for is something more advance like resizing / cropping provided images in order to fill gaps, see the gallery i've made as an example: http://petpal.co.il/test/fluid.html
I hope something like this is possible because then i belive me and many others will find mason.js much more usefull for galleries purposes.
from mason.
Any news on that?
I badly need a solution for what 'petpal' has asked.
from mason.
same here... major duplication. If duplication isn't something that could be eliminated completely then it might be a good idea to use the filler images in sequence as it would at least not place duplicates next to each other. Does anyone know how to implement this?
from mason.
Hello
I managed to achieve this effect !!!! :)
look at this: it takes many random images of unkown size and amount and make a mason out of it:
http://petpal.co.il/generate
from mason.
@PetPal could you specify how you achieved your result?
from mason.
@PetPal the page is not there anymore, would be nice if you could host your solution somewhere!
from mason.
I made something that may come handy: https://github.com/mayankcpdixit/grid-no-white
from mason.
Please include a link and how this deals with mason.
Sent from my Delorean
On Oct 9, 2015, at 8:26 PM, Mayank [email protected] wrote:
I made something that may come handy: https://github.com/mayankcpdixit/grid-no-white
—
Reply to this email directly or view it on GitHub.
from mason.
@DrewDahlman Hey,
I added a link to github repo. It's not a wrapper around mason. It's just a lightweight image-grid module in JS.
Not much configurable. But it does the job.
from mason.
Related Issues (20)
- virtual scrolling
- Is it possible to work with zeptojs instead of jquery? HOT 1
- Items repeating unnecessarily HOT 9
- fixed outer container (both height and width) HOT 3
- Adding and removing boxes HOT 1
- Blocks not filling in space HOT 3
- Fillers should be hidden to people using screenreaders HOT 2
- Fillers disappearing
- Fillers with different sizes HOT 3
- Fillers off by exactly 8px? HOT 2
- Items left-aligned and a ton of fillers HOT 3
- Feature request: smooth transitions HOT 1
- Hide original filler element(s) HOT 1
- Example with multiple images? HOT 6
- Feature request: Variable Gutter
- Space around the grid
- May I suggest
- Getting typeError
- Fixed height of container
- Is there a way to refresh Mason? HOT 1
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 mason.