I found an image grid that I am using and would like to modify it to load images in HTML instead of js. Here is the original source: https://codepen.io/team/css-tricks/pen/pvamyK.
My desired format for loading images is as follows:
<section id="photos">
<img src="img/single.png" alt="Cute cat">
<img src="img/single2.png" alt="Serious cat">
<img src="img/single3.png" alt="Serious cat">
<img src="img/single4.png" alt="Serious cat">
<img src="img/single5.png" alt="Serious cat">
</section>
Replace the js code with HTML images. The js code is currently generating random image markup.
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
body {
margin: 0;
padding: 0;
}<section id="photos">
<img src="https://placekitten.com/344/328" alt="pretty kitty">
<img src="https://placekitten.com/333/368" alt="pretty kitty">
<img src="https://placekitten.com/214/375" alt="pretty kitty">
<img src="https://placekitten.com/286/268" alt="pretty kitty">
<img src="https://placekitten.com/288/388" alt="pretty kitty">
<img src="https://placekitten.com/235/246" alt="pretty kitty">
<img src="https://placekitten.com/213/389" alt="pretty kitty">
<img src="https://placekitten.com/276/304" alt="pretty kitty">
<img src="https://placekitten.com/216/354" alt="pretty kitty">
<img src="https://placekitten.com/252/371" alt="pretty kitty">
<img src="https://placekitten.com/328/350" alt="pretty kitty">
<img src="https://placekitten.com/381/339" alt="pretty kitty">
<img src="https://placekitten.com/292/259" alt="pretty kitty">
<img src="https://placekitten.com/216/285" alt="pretty kitty">
<img src="https://placekitten.com/337/371" alt="pretty kitty">
<img src="https://placekitten.com/335/382" alt="pretty kitty">
<img src="https://placekitten.com/245/345" alt="pretty kitty">
<img src="https://placekitten.com/307/306" alt="pretty kitty">
<img src="https://placekitten.com/258/363" alt="pretty kitty">
<img src="https://placekitten.com/293/390" alt="pretty kitty">
<img src="https://placekitten.com/355/221" alt="pretty kitty">
<img src="https://placekitten.com/330/205" alt="pretty kitty">
<img src="https://placekitten.com/234/383" alt="pretty kitty">
<img src="https://placekitten.com/329/200" alt="pretty kitty">
<img src="https://placekitten.com/303/362" alt="pretty kitty">
</section>I have encountered an issue while using MapBox. When a user clicks on the map, I am receiving longitude and latitude coordinates that are not very accurate. For example, when I clicked in the United Kingdom, the values pointed me to the middle of the sea a ...
Currently, I am attempting to dynamically set the state of checkboxes to either true or false. The following code snippet demonstrates what I have tried so far: for(var i = 0; i < bookmakers.length; i++) { $('#' + bookmakers[i].id + &apos ...
In my component file, I am facing an issue where the event object property is not displaying on the UI. I am seeking help to resolve this problem as I am new to Angular and working on a project in production. import { Component, OnInit } from '@angul ...
<h:inputText id="usernameInput" value="#{userBean.un}" styleClass="form-control" required="true" onfocus="popupMessage(this, 'username');"> <f:validateRegex pattern="([a-zA-Z_0-9]+)">< ...
Having recently delved into the world of AngularJS and Ionic, I've exhaustively searched for solutions both on this forum and beyond. Despite my efforts, nothing seems to be working. My goal is to create an application with a homepage featuring a ser ...
I have developed a system of alerts that allows users to delete an alert if they choose to do so. Below is the code for the delete button and table: <button type="button" name="Delete" Onclick="if(confirm('Are you sure you ...
function changeElementClass(path, changeClass, duration){ $(path).removeClass(changeClass); $(this).addClass(changeClass); )}; $('.flightDetails .option').changeElementClass('.flightDetails .option','selected',300); ...
There is a script in place that retrieves the input text field from a div container named protectivepanel. An ajax post call is made to check this text field in the backend. If the correct password is entered, another div container panel is revealed. < ...
I've set up dropzone js for drag and drop file uploads in Django. For this, I needed to use a Django form with the dropzone class. Since I also wanted users to add text information, I ended up creating two forms in Django - one for the dropzone upload ...
As I work on developing my web application and utilize a bootstrap template, I encountered a situation where I needed to include an inline image with text, with the image floating to the left and the text positioned to the right. The paragraph element in ...
In TypeScript, a class can be defined as shown below: class Sup { static member: any; static log() { console.log('sup'); } } If you write the following code: let x = Sup; Why does the type of x show up as typeof Sup (hig ...
In my custom Factory function, I need to return a specific type: type Factory<T> = () => T; interface Widget { creationTime: number; } const createWidget: Factory<Widget> = () => { return { creationTime: Date.now(), foo: &a ...
Having created a simple function to retrieve certain values from an array that contains multiple nested objects, I am facing a dilemma with my loops. My query pertains to the necessity of looping through the 3 objects before accessing their values. While ...
I have implemented a function to process a large array of strings (user names), checking for single quotes and pushing them into a new array before returning it. However, I recently encountered an issue as the number of users in the list has grown substan ...
I am currently working on a Vue project that integrates with Stripe. However, I encountered an error when I loaded my workspace recently, and I am having trouble figuring out how to resolve it. Oddly enough, the live version of my project is functioning p ...
Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...
Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...
Strange scenario... when using this code, a picture appears with the related text BELOW it. It's crucial that the picture remains clickable, but the text isn't wrapping as desired (see below): <div class ...
Can anyone suggest how I can refresh the webpage using PHP after submitting a form? I've been searching for a solution but haven't found one yet. Your assistance would be greatly appreciated. ...
Whenever a user chooses an option from a drop-down menu, an event needs to be triggered. I have a checkbox that retrieves an ID from the database; based on this ID, a user can be added or removed from the drop-down menu. var ajReq = new XMLHttpRequest(); ...