I wanted to read all the images from the folder and display dynamically to the html page by adding the image names at the left hand side pane. Once clicked on the image name that should show the image in the right hand side pane.
I tried like as shown below but it is not showing the images once clicked on the Display button.
<!doctype html>
<html lang="en">
<head>
<script type = "text/javascript">
function myfunction() {
var folder = "images/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
}
</script>
<meta charset="utf-8">
<title>Sequence Diagram</title>
<link rel="stylesheet" type="text/css" href="assets/3rdparty/markdown.css">
<link rel="stylesheet" type="text/css" href="assets/custom.css">
</head>
<body>
<div id="placeholder"></div>
<div id="content">
<input type = "button" onclick = "myfunction()" value = "Display">
</div><!--End of content-->
<script src="assets/3rdparty/marked.js"></script>
<script src="assets/custom.js"></script>
</body>
</html>
Can someone suggest how to do this in a dynamic way for all the images in a folder.
Thank you...
There is currently no method to achieve this; you must use other programming languages such as javascript and others... If you're going to utilize javascript, I prefer ReactJS or NextJS...
HTML is only a web markup language, and it cannot perform what you are requesting right now. I'm not sure how to describe it all, but I hope you get the idea.