Comments (5)
One of the things is that you will need to give is the Layout
If you don't give layout then it will stick to it's default of 1 column. You see Photos aligning next to each other because of their CSS properties.
Unlike some libraries, this one will not give you a perfect layout unless you specify it to.
from photoset-grid.
Oh, thanks, but the data-layout="23" is given, but the result isn't so good...
However I'll try some other ways to resolve this issues.
Thanks for your support,
Mick
from photoset-grid.
@dynamick - I'm currently using this in my project. The main reason is that the image needs to be 100% loaded for the grid to work.
With that said, it is ideal to have Width and Height attributes added to the img
element before you call the photosetGrid
function.
from photoset-grid.
@dynamick To keep the whole thing dynamic, i am using the Image
Element constructor like below to set the Height
and Width
Attributes
var newImage = new Image();
newImage.src = img.getAttribute('src'); // img is the Image
newImage.onload = function () {
img.setAttribute('width', this.naturalWidth);
img.setAttribute('height', this.naturalHeight);
index += 1
setWithAndHeight(index, len);
}
from photoset-grid.
This should be fixed with #72
from photoset-grid.
Related Issues (20)
- Non-standart photo resolution HOT 4
- Why "Adding a buffer to shave off a few pixels in height"? HOT 1
- Vertical centering of images in grid HOT 1
- Optional adding a caption to the images in the grid. HOT 3
- Reaction for issue #51
- Verticaly ? HOT 1
- Safari zero row height bug HOT 1
- Photosets don't show up when using Safari 8.0.7 HOT 2
- Problem with plugin on initial load, works fine after subtle resize HOT 2
- Clicking third image opens up first image? HOT 1
- Why are some images like this, like see the second one? HOT 1
- Algorithm for randomly generating layouts based on N number of images? HOT 2
- Doesn't play well with page spinner and Bootstrap tabs, shows sliced off images
- Setting dual dimensions for high resolution image and thumb image differently. HOT 1
- Limit to data layout amount HOT 2
- Isn't responsive HOT 1
- Incorrect layout on various heights HOT 1
- Gutter not working between rows HOT 2
- Different grid 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 photoset-grid.