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.
After exploring numerous websites, I am still struggling to find a solution. Perhaps my lack of experience with MVC is hindering my ability to recognize the answer when it presents itself. Many tutorials only cover displaying an alert message, but what if ...
My current situation is as follows: I have an input element whose value is being changed using jQuery's val() method. I am attempting to update the Angular model with the value set by jQuery. I tried creating a simple directive for this purpose, but ...
I'm currently exploring a workaround for the initialScrollIndex issue in FlatList that is not functioning correctly. I attempted to use getItemLayout to address this, but encountered a new problem - my elements inside the FlatList have varying heights ...
If we have style definitions like the following: .a.b { ... } .a.b.c { ... } Is there a method in SASS/SCSS to prevent duplication of the .a.b part? ...
I'm currently learning node.js through a tutorial in a book titled Node Web Developments. Issue: I am struggling with understanding why an array [] is being passed as the 3rd argument from mult-node.js to the required function htutil.page(), instead ...
Is it possible to link an external CSS file stored in Dropbox with HTML? I have followed all the instructions I could find online, including clicking and pressing "Copy Dropbox Link" to generate an href link. However, it doesn't seem to be working. ...
I am attempting to use the Gmail API to send emails. I collect user data and convert it to a base64url string. After obtaining the raw value, I attempt to send the email using a POST request. var ss=new Buffer(message).toString('base64') var ...
My current project involves using multiple versions of the Nvd3 library for different charts on a single page within an Angular application. Each chart is loaded through its own template and requires a specific version of Nvd3 (e.g., v1.8 for partial_1.htm ...
I'm facing an issue with my background containers, "background-overlay" and "background-gradient", as they are extending the height of the document beyond the actual content displayed. I am unsure of what could be causing this problem. It might be som ...
My current approach to sending the request is as follows: $(document).on('submit', 'form', function(e) { var form = e.currentTarget; console.log($(this).serialize()); $.ajax({ url: form.action, ...
Recently, I integrated jQuery and a third-party plugin called "stiffChart" into my Angular 7 project. After installing jQuery and the plugin in my project, I declared them in angular.json file as well. However, when trying to call a method from the plugin, ...
I have implemented a Webmethod in ASP.NET and am attempting to access it through jQuery AJAX. When I request the Webmethod directly via browser, I receive a JSON response. However, when I make the call using jQuery AJAX, I am seeing "204 no content" in Fir ...
When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...
I recently implemented the toggler button (hamburger icon) code in my HTML, but I'm facing an issue where the hamburger icon doesn't appear and looks blank when I resize my screen or view it on a smaller viewport. Here's the snippet of my H ...
Having some trouble saving form data to the database using angularjs. Not sure what I'm doing wrong. Here's my HTML form: <form id="challenge_form" class="row" > <input type="text" placeholder="Challenge Name" ng-model="ch ...
While exploring the ui-router documentation, I came across an object called UrlMatcher. This object contains useful methods like exec, but I am struggling to find clear instructions on how to access it. Nevertheless, the documentation page provides a detai ...
When prompting users to enter their weight, it's important to consider both metric and imperial units. One convenient approach might be to provide a dropdown menu for users to choose their preferred unit of measurement before filling in the correspond ...
Currently, I am working on email validation where users might input empty spaces in the email field. To address this issue, I have implemented a logic to trim the input value using $trim and then re-assign it to the input field. Although everything seems ...
In order to achieve my goal, I am looking for a way to take an array as input and save the result for future use. Unfortunately, I do not have permission to create additional functions. As a result, the code must accurately reflect what result should be. l ...
I'm facing an issue trying to pass the selected value from a dropdownlist in a user interface. I have a parent component (app.component.html) and a child component (hello.component.html & hello.component.ts). My goal is to transfer the option val ...