Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag?
I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to use. Is there an alternative method?
Can I utilize a separate .js file containing the image files and then use a script in HTML to display them?
This would involve displaying .jpg and .png files.
To showcase a collection of images on your webpage, one approach is to store the image names in a JavaScript array and utilize forEach method for listing them as demonstrated below:
var images = [
'airplane.png',
'arctichare.png',
'baboon.png',
'barbara.png',
];
var baseUrl = 'https://homepages.cae.wisc.edu/~ece533/images/';
container = document.getElementById("imagesContainer");
function createImages(item, index) {
container.innerHTML = container.innerHTML + "<img src=\"" + baseUrl + item + "\"/><br/>";
}
images.forEach(createImages);<div id="imagesContainer"></div>If you aim to automate the listing process, incorporating a server-side scripting language such as PHP would be necessary.
There is a simple method to achieve this task, especially if all the files are stored in one folder - just loop through the folder. Should you wish to display them in separate divs, some modifications may be required on the code snippet provided below.
In the example, I have used the number 75 for demonstration purposes; in your case, adjust it to 500. If your files consist of both jpg and png formats as mentioned, you can organize them into subfolders (jpg and png) and assign different values accordingly (e.g., set jpg to 300 and png to 200).
The code snippets showcased here provide a foundation for image display based on file format. Feel free to tweak them further to suit your specific requirements.
var jpgcontainer = document.getElementById('jpg');
var pngcontainer = document.getElementById('png');
var files = {
'jpg': 300
};
var files2 = {
'png': 200
};
for (var jpgext in files) {
for (var i = 0; i < files[jpgext]; i++) {
var jpgsrc = "images/jpg/" + (i + 1) + "." + jpgext;
var jpgimg = new Image();
jpgimg.src = jpgsrc;
jpgcontainer.appendChild(jpgimg);
}
}
for (var pngext in files2) {
for (var j = 0; j < files2[pngext]; j++) {
var pngsrc = "images/png/" + (j + 1) + "." + pngext;
var pngimg = new Image();
pngimg.src = pngsrc;
pngcontainer.appendChild(pngimg);
}
}img {
width: 50px;
height: 50px;
display: block;
}<div id="imgcontainer">
<section id="jpg">
</section>
<section id="png">
</section>
</div>Another method involves utilizing Excel along with the CONCAT function to generate the necessary code automatically.
For example, if you have a list of image locations in column A, you can input the following formula in column B for each row. Let's say column A contains "image1.png":
=CONCAT("<img src='", A1, "' />")
Simply drag down the formula in column B and then easily extract the HTML code for all the images.
I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...
Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...
I have a JavaScript object that I want to convert into HTML elements and display it in Vue.js. So far, my approach has been to convert the object into strings representing HTML elements and then add them to the template. However, even though this method di ...
Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...
While working with JavaScript / Typescript, I often find myself needing to verify if a length exists or if a value is true or false. So, the main query arises: are there any differences in performance or behavior when checking like this... const data = [ ...
I need to create an object using the angular.forEach() function and then push another object while initializing all values to false. However, the current approach is causing errors. How can I achieve this correctly? Using "item.id" and "index.id" does not ...
Looking to retrieve the largest date from a folder by reading its contents. https://i.stack.imgur.com/KYren.png Here is the code snippet to read the folder, extract filenames, and determine the largest date (excluding today): async function getLastDate ...
I can't figure out why the final line in this code snippet is returning false. Is it not identical to the line above? const Statuses = Object.freeze({ UNKNOWN : 0, OK : 1, ERROR : 2, STOPPED : 3 }); class myStatus extends Object{ co ...
I am attempting to pass JSON results from Python to HTML using AJAX in Node.js. My objective is to collect client-side inputs, send them via AJAX to Node.js when a submit button is clicked, and then have the /data middleware execute a Python script that i ...
I've been struggling with this issue for a while now. I need to move the pagination outside of the slider, but using padding or margin doesn't seem to work. It always remains inside the slider, and if I try to position it outside, it gets hidden. ...
While working on a website for a power plant, I encountered some issues that require assistance. The main problem is that our client does not want to set up a database on their server. This means I can only use html, javascript, and a bit of php. There is ...
Is it possible to remove the limitation on data sent using JSONP? Here's my code. I'm attempting to send 3000 characters (an image converted to base64 data) at a time to a service (serviceCall.ashx). Since my data is quite large, up to 30,000-40, ...
I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM Now, I'm attempting to achieve the same effe ...
Struggling with connecting my CSS files while using EJS. I've checked out another solution but still can't seem to get it right. Here is the code I used as a reference for my CSS file. EJS <html> <head> <meta charset="utf-8 ...
Hello everyone, I have a website where users can add their experiences. While adding an experience, they can dynamically add and remove more fields. One of the input fields is for a date, but when the data is submitted, the same date appears for all entrie ...
I have an array object structured like this. [ {student_code: "BBB-002-XRqt", questions: "Length (in inches)", answer: "8953746", time: "00:00:08:15"}, {student_code: "CCC-003-TYr9", questions: "He ...
Whenever I use an SVG tile as the background for my website, it appears perfectly fine when viewed in a browser. However, when I try to print the page, it scales in a strange and nonuniform way. Is there a solution to prevent this distortion when printing ...
In my code, I am using AJAX to send a POST request to a servlet. The servlet processes the request and sends back a response. In the success function of the AJAX call, I perform certain actions based on the response. Here is the AJAX CALL: $.ajax( { ...
I need to recreate a custom input styled like the Google Material Theme design. This is the desired outcome: https://i.stack.imgur.com/QU5dp.png While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from s ...
Looking to expand my skills in HTML and CSS, I've encountered a bit of a hiccup. Utilizing Bootstrap for my webpage, here's the simplified version of what I have so far: index.html: <!DOCTYPE html> <html> <head> <lin ...