OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Display images from Local File in html,css & js website gallery

  • Thread starter Thread starter Tessalarius
  • Start date Start date
T

Tessalarius

Guest
In my university course/module that covers intermediate HTML and CSS, and basic java-script (thought we haven't gotten there yet): I need to create a website using HTML, CSS and optionally java-script as bonus marks.

I am stuck at the gallery, I want to make a responsive image grid (that I can learn/get from https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp); However I want to have a local folder filled with say 100 images and my website with html/css/js code that doesn't require me to manually hard code each individual image from the folder. In hindsight I want to add and remove images from said folder and have the website's gallery adapting to the added/removed images.

Theoretically I assume that I'll need to read in the folder's contents, into a list/array, then somehow parse them and output the content.

I have found two sources that touches on the idea: - https://www.html5rocks.com/en/tutorials/file/dndfiles/ - https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing

I have searched for a few hours and I would think that such a code should exist somewhere, thought I believe my lack of knowledge regarding html, css, js, etc and general terminology is hindering me in my search, thus any advice would be greatly appreciated.

Thank you in advance for your time and effort.

<p>In my university course/module that covers intermediate HTML and CSS, and basic java-script (thought we haven't gotten there yet): I need to create a website using HTML, CSS and optionally java-script as bonus marks.</p>

<p>I am stuck at the gallery, I want to make a responsive image grid (that I can learn/get from <a href="https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp</a>); However I want to have a local folder filled with say 100 images and my website with html/css/js code that doesn't require me to manually hard code each individual image from the folder. In hindsight I want to add and remove images from said folder and have the website's gallery adapting to the added/removed images.</p>

<p>Theoretically I assume that I'll need to read in the folder's contents, into a list/array, then somehow parse them and output the content.</p>

<p>I have found two sources that touches on the idea:
- <a href="https://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow noreferrer">https://www.html5rocks.com/en/tutorials/file/dndfiles/</a>
- <a href="https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing" rel="nofollow noreferrer">https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing</a></p>

<p>I have searched for a few hours and I would think that such a code should exist somewhere, thought I believe my lack of knowledge regarding html, css, js, etc and general terminology is hindering me in my search, thus any advice would be greatly appreciated.</p>

<p>Thank you in advance for your time and effort.</p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top