Display a picture from a directory onto a webpage by incorporating ASP.NET in C#

I am in the process of creating an image gallery for my website. In this scenario, I am displaying thumbnails of all images and when clicked, the image appears in a modal window. There are two main folders:

  1. Thumbs (contains thumbnails)
  2. Full Image (contains full-sized images)

I have named the images with the same name in both folders, and I can also hard code the path to the images like this:

<ul id="gallery">
      <li><a  href="http://ppplugins.com/demo/ppgallery/images/l_01.jpg" title="Title will be here"><img class="GalleryThumbnail" src="http://ppplugins.com/demo/ppgallery/images/s_01.jpg"></a></li>
    </ul>

However, I am unsure how to achieve this without hard coding values. Any assistance would be greatly appreciated. Ideally, if I add more images to these folders, they should automatically display on the page. Explore the links below: 1)

http://182.50.154.23/elweb//CheckImagesFromFolder.aspx
(attempting to replicate as shown in the second link provided but without hard coding the source) 2)
http://182.50.154.23/elweb//Gallery.aspx
(desired outcome)

c#jqueryasp.netcss

Answer №1

        let thumbnails = FileSystem.getFiles("directory for thumbnails");
        let imagesList = FileSystem.getFiles("directory for images");

        for (let image of imagesList) {
            let thumbnailName = thumbnails.filter(x => x.slice(2) == image.slice(2));
        }

I'm not entirely certain if this is what you're looking for, but if the files are stored in separate folders, it will fetch their paths.

You can also compare the names of thumbnails and images to find a match.

Answer №2

Utilize a Database to store image names and file paths, then implement a repeater control to display the list of images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Contrasting CSS Attribute Selectors and Pseudo-Elements in Input Tags

<input type="text" placeholder="nothing" title="google" required> **CSS Content:** input[type="text"]{ border: 2px solid red; } input::placeholder{ color:green; } input[title="google"]{ background ...

htmlcsscss-selectorsattributes

Experience the magic as the hover effect kicks in

When my div slides up or down and I move the mouse over it, the hover effect repeats multiple times. How can I prevent the function from restarting until I move my mouse away and then back over the div again? <div id="hover">Hover on me<di ...

jquery

Looking for some guidance on JavaScript and CSS

I have a JavaScript function that animates clouds moving across the screen. I am trying to restrict the area they cover to only occupy the top 300px of the screen. I attempted to add "height:300px; top:0px;" to the DIV style, but it didn't produce th ...

javascriptcss

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...

htmlcssbootstrap-4bootstrap-5

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

javascriptcssreactjs

Image caption dynamically updated to match thumbnail caption using jQuery upon click event

My goal is to dynamically load the data-caption of thumbnail images when clicked, and then update the main image's data-caption when the main image is changed with a thumb image. I am currently struggling to make the data-caption update along with the ...

javascriptjqueryhtmlcssimage

How can I integrate live data from a MySQL database to automatically update tables on a website?

I have developed a basic application using C# and .NET, with MVC architecture and a MySQL database linked to my server. I have utilized ADO.NET database models to automatically generate static data in my views from the models saved in the database, with ...

c#javascriptjquerymysqlajax

Personalize the appearance of a component using React Bootstrap styling

I am looking to customize the default style of a react-bootstrap component. For instance, when using the Panel component, I would like to make the title bold. How can I accomplish this without losing the default styles of a "warning" panel when using bsCl ...

csstwitter-bootstrapreactjscustomization

Jquery for controlling the navigation menu

I'm new to JavaScript and facing 3 challenges: 1. When I click on the parent <li>, the correct content of the child <sub> does not show up. Each category like "colors, shapes, sizes" should have corresponding child categories like "green, ...

javascriptjqueryhtmlcss

Utilizing $(this) with the .ready() method for referencing

Currently, I am experimenting with Tumblr documentation in order to have specific posts (ask posts in this scenario) dynamically appended to a separate fixed div that mimics a "chatLog" or continuously displays new posts as if they were messages. Since I a ...

jquerythiseachtumblrready

A collection of dynamically created checkboxes is being gathered into an array to capture all of their values at

Here is my code snippet: Checkbox1 content: Generated dynamically from a JSON list tr.append($("<td />").html('<input type="checkbox" id="reqid" name="reqid[]" value='+item+'>')); Checkbox2 content: Also generated dynamic ...

jqueryajaxjsoncheckbox

Address the underlying issues with the background

I am working on an app and I want to include a fixed background image. I am using HTML5, CSS3, and JavaScript for this project. I have applied the CSS code to set the background image as fixed: body{ background:#1F1F1F url(../assets/bg.png) fixed;} Ev ...

htmlcss

Developing dynamic data fields using CakePHP

I am embarking on creating tables to house dynamic data fields. The idea is to store the information from a dynamic form inside tables in MySQL. Users can select any number of fields (datatypes) from the form, which resembles a dynamic form like the one ...

phpjquerymysqlajaxcakephp

Steps for Deactivating Past Dates on JQuery Datepicker1. Open your

I've been working on a custom JQuery Calendar for selecting appointments, with the requirement to disable dates prior to the current date and highlight available dates in an orange color (#f48024). Unfortunately, my attempt using minDate hasn't b ...

javascripthtmljquerydatepickercalendar

I am perplexed by the CSS property `height: auto;` which seems to be making the element taller than necessary. How exactly is

Currently, I am dealing with some HTML/CSS aspects of an already established WordPress website. It appears that there might be an issue related to the theme's CSS causing this problem, although it is not immediately apparent. Specifically, there is s ...

htmlcss

an array of unidentified objects converted to a list of objects that share similar variable names

When I receive the value from the API, my current code expects it to be a JSONArray for correct deserialization. I suspect that it's an anonymous array containing a list of objects. Here are the attempts I've made: Question: How can I extract t ...

c#arraysapijson.netanonymous-types

e.target not functioning in Opera and Chrome browsers

After implementing a jQuery navigation bar with dropdown functionality, I encountered an issue where the dropdowns did not disappear when clicking outside of the navigation bar. Despite this glitch, the majority of the functionality is working correctly. ...

jqueryhtml

Is it possible for a Jquery radio button to trigger an infinite loop?

When I click on a radio button, I want to receive an answer from the PHP file. However, when I use the radio button, the alert appears in an endless loop. Why does this happen and how can I make the alert display only once? I tried with just a regular but ...

javascriptjqueryajax

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

javascriptphpjqueryhtmlajax