Looking to create a photos grid layout similar to Facebook using angularjs and bootstrap. Came across the angular-masonry plugin which seems like it could work. Here are some sample layouts I'm aiming for:
https://i.sstatic.net/6NdNW.png
https://i.sstatic.net/4zFaz.png
https://i.sstatic.net/WnTuh.png
https://i.sstatic.net/7lewT.png
Any tips on achieving this? Open to suggestions for other plugins as well.
Here are some options for creating photo grids:
ngPhotoGrid
freewall - Uses jQuery
Bootstrap Responsive Image Gallery by mobirise
Also check out - An AngularJS directive for Masonry
Example using ngPhotoGrid :
There's a more straightforward approach to achieve this using only pure CSS: utilizing the properties column-count and column-width.
Check out this live demo on JSFiddle (https://jsfiddle.net/3z73obt0/1/)
Below is the code snippet:
#wrapper {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
#wrapper > div:nth-child(n+2) {
margin-top:10px;
}
#wrapper > div:nth-child(1) {
height: 150px;
width:100%;
background-color:#8ebce5;
}
#wrapper > div:nth-child(2) {
height: 150px;
width:100%;
background-color:#3a2313;
}
#wrapper > div:nth-child(3) {
height: 100px;
width:100%;
background-color:peru;
}
#wrapper > div:nth-child(4) {
height: 100px;
width:100%;
background-color:#BB3579;
}
#wrapper > div:nth-child(5) {
height: 100px;
width:100%;
background-color:#EAC243;
}<div id="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>If you'd still prefer using a library, consider exploring the isotope library for a similar layout. Learn more about it here:
Here's a beautiful masonry layout created with isotope on Codepen: http://codepen.io/desandro/pen/mIkhq
Have you checked out ngPhotoGrid? https://github.com/jerryc-nguyen/ng-photo-grid
An easy-to-use photo grid similar to Facebook in AngularJS with no external dependencies.
After viewing its Examples, it seems to be the solution you are seeking.
I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...
I am working on a project where I have a select box for cities that are populated using ng-options. My goal is to display a map on the website based on the city selected in the select box. Here is an example of how I am fetching city names: // JavaScr ...
I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list. Check out this image for reference In the example i ...
I'm trying to style a div tag in a specific way: If the content inside the div is less than 100px, I want the div tag's height to be exactly 100px. However, if the content's height exceeds 100px, I want the div tag's height to adjust au ...
After dabbling in Java, Visual Basic, HTML, and CSS, I'm now looking to create an interface featuring a central spinning cube with 3 fields to control its x, y, and z rotation speeds. Can you suggest which language would be the best fit for this proje ...
Trying to absolutely position elements within tbody, tr, and td may not work in certain browsers. While it behaves as expected in Firefox, it does not work properly in IE, Edge, and Chrome. If you apply position: relative to tbody, tr, or td, it will be i ...
A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...
I've been struggling with this issue for a day now and I can't seem to pinpoint where I'm going wrong. I have experience working with JavaScript on the client side and recently started following a book tutorial. However, it appears that Face ...
I need assistance with adding an image or icon above each step in the progress bar. I attempted to insert an image tag, but it ended up next to 'step 1', which is not the desired outcome. .progressbar { counter-reset: step; } .progressbar li ...
I need help designing a container that is responsive for both mobile and desktop, resembling the layout shown in this image. The initial HTML structure is as follows, but I can modify it by adding elements or classes if necessary. <div class="conta ...
I've encountered an issue while using ng-show in a page that I'm currently designing: <td ng-show="week.EndDate > controller.currentDate"> The week object has a property called EndDate, and the value of currentDate is being set in my c ...
Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...
CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...
Although I've been a bit slow to get on board with Responsive Design, I finally understand how it works. However, there's one specific issue that has stumped me - something I don't recall ever encountering in my 10 years of website developme ...
I'm working on a directive that's responsible for embedding footnotes into a body of text while providing popover functionality. The text-notes directive is designed to be placed on a parent element, loading content and its related text notes dyn ...
I have encountered an issue while using Openscript on a form page with a clickable "save" button implemented as a div. Manually clicking the button triggers a javascript event that saves any changes made on the page. However, when I run the script, the but ...
I am currently working on a project using AngularJS. The data I have is in the form of JSON: { "leagues":{ "aLeague":{ "country":"aCountry", "matchs":{ "aUniqueID1":{ "date":"2014-09-07 13:00:00", "guest_play ...
Currently, I am in the process of developing a web application using a combination of AngularJS and Laravel. Everything seems to be working fine when I navigate through the URLs and links within the app. However, an issue arises when I try to directly inp ...
It seems like bootstrap is mysteriously including an unseen margin in my column classes. Even after inspecting an element labeled as 'col-lg-3,' there is no visible margin CSS, and attempting to manually add margin:0 still results in a margin bei ...
I'm having trouble creating a border around only the top row of my table. Right now, the border is only displayed around the outside of the entire table. I also want to add a border specifically to the first row that contains 'Team, Correct Picks ...