JavaScript Query

[Christopher J Gillham]

Hi everyone,

I just have a quick question regarding a JavaScript that I am trying to write for a gallery page for my website as I seem to be hitting a bit of a brick wall with it. Basically what I am trying to achieve is to have all of the images pre-organised by photo type into different folders on the server and when a particular button in the navigation bar gets pressed, it will look for every image in that folder, create an index of them and then create a table on the page to display the image results.

I've tried looking into the find and fetch functions going off some YouTube tutorials however I don't think that I used them correctly as the videos were slightly out of context for what I am trying to do and it's doing my head in. I also tried just coding the table with placeholder images into the source code and have the JavaScript replace the data but the total number of results can change. Also, I would like to include a class to the table itself so I can add in some CSS to format it a little and not be particularly worried about error messages if one of the photos gets moved or deleted from the folder or a new photo added not being listed.

I know it sounds pretty simple but yeah, it's kinda throwing me around a bit so if you have any advice, I'd be grateful. Cheers, Chris Gillham

[BenPleysier]

So, in fact you are saying is that this is your personal view and not the industry standard view.

[B i r n o u]

the most difficult thing was to limit ourselves to 8 bubbles...

[osgood_]

So, in fact you are saying is that this is your personal view and not the industry standard view.

By @BenPleysier

No its not a personal view. Its a view which takes into account what workflows are predominately being used within the industry today. Look at the latest Javascript survey, answered by developers from within the industry, where does Wappler/App Connect feature in the list, nowhere. You are obviously blinkered by what you use and are in denial or just maybe not a serious developer. You can try an defend it all you want but you can't list any job boards and you can't list where it features in any surveys. If that doesnt give you some kind of indication then I can lead a horse to water but I cant make it drink.

Anyway I have more important things to do like cutting the ivy down in my garden. Its a beautiful spring day and Im going to get some fresh air rather than talking the wall.

[Christopher J Gillham]

Hi everyone,

I didn't realise the direction that this conversation would take however there are a few things that I can clarify for the benefit of it. The first being that I am a film and photo producer in Australia so I think that basically means that all of the responses have come in the middle of the night and following up on them is not worth literally losing sleep over when they appear to be an argument about someone else's experience as I have come to know that to lead to not having a job and not getting one after just as a piece of friendly advice.

Now that's been said, and sorry if I hurt any feelings, I have included a couple of snippets of code that I managed to dig up that allows me to dynamically create a table in JavaScript and format it with CSS and HTML code. The problem that I have now is first separating the numbers into different cells, which is possibly unneccesary, and replacing the numbers with images that I believe that I may be able to achieve by placing them inside div elements generated in the same fashion as the table with the exception that if the JavaScript were able to look for a file extension inside the folders and create a div element for each one it finds in that location and then populate it on the page, I may be able to use the CSS to format those as well and the only thing that matter inside the folders is making sure all of the photos have the right file extension.

I did come across a snippet of code for Node.js on the web but unfortunately it didn't want to work with the JavaScript I'm using so I don't really want to try and learn Node.js right now just for that, maybe at a later date. So now that I feel bad for asking for help again after slapping a few wrists in the first paragraph, I'll get it over with and ask anyone who wants to answer constructively which JavaScript method/s would you reccommend that I look into to attempt this? Thanks again.

[BenPleysier]

The first being that I am a film and photo producer in Australia

By @Christopher J Gillham

Close to Grindelwald; great place for a holiday.

Wikipedia says:

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

In other words, you do not learn NodeJS, you learn JavaScript. That is why NodeJS is such a good choice if you want to stay with JavaScript for the back end.

If you want to see a YouTube video on the subject - the only one that I could find.

https://www.youtube.com/watch?v=H9o3ej8DB-k

Another possible method is to use PHP as the server model. That means learning PHP. But there will be many more examples of what you want to do.

Once again, if you want to stay with JavaScript, then NodeJS is your only answer. And I can't emphasise enough, that Wappler will be your greatest friend. 

Carn the Pies

[B i r n o u]

it goes without saying that one may not be fond of this approach... whatever... I find the breakdown of the code really well structured and so logical... each element playing its own role in an autonomous and almost independent way... at least interchangeable way.
moreover the solution carried by Pa Wa, incrementing BS is well seen to demonstrate this scalability as simply implemented... thanks @BenPleysier 

[osgood_]

In other words, you do not learn NodeJS, you learn JavaScript. That is why NodeJS is such a good choice if you want to stay with JavaScript for the back end.

By @BenPleysier

You need to learn the workflow of node.js just like anything else as you need to require many bits of middleware to even get it to work, you can only use a specific file/folder structure unless you again know how to designate differently. You need to create get/post routes for each page. This might be javascript BUT its specifically related to node.js so you do need to learn it and the process is far from simple for anyone with limited knowledge of coding unless they invest what £600.00 in a program which can help the process and then they will take a few months to learn the program.

[osgood_]

exception that if the JavaScript were able to look for a file extension inside the folders

By @Christopher J Gillham

Without a back-end process javascript cannot look for anything inside folders. Your choice IF you insist on using a folder structure to store your images is either use node or php or some other server-side process like python.

I could give you the whole process using 5 lines of  php in combination with the browsers inbuilt fetch API. You could search a set of folders, which have your images inside. At the click of a button/s on your page, which relates to the folder/s where your images are stored have those set of images returned in json format which javascript could read, loop through and insert into an image gallery on the page. Its about a 10/15 minute process, if that, BUT alas I feel I would be wasting my time........so good luck with the project.

[BenPleysier]

No you would not be wasting your time. I think I could learn from it as would a multitude of others.

Thank you for your offer and am looking foreward to it.

[osgood_]

No you would not be wasting your time. I think I could learn from it as would a multitude of others.

Thank you for your offer and am looking foreward to it.

By @BenPleysier

Unfortunately there is NOT a multiude of others in this forum these days that will benefit otherwise I would share the solution.

You should know how to do this using some simple php and the scandir function, you should know how to json encode the echoed php results and you should know how to use fetch to send a url parameter and get data back into a javascript array to loop through.

You're pretty experienced at coding or was at one time, so this shouldn't be that difficult.

However would I do it this way, nope. I would store the image data in a database as its a lot more flexible - you can have a meaningful alt description for your images and you can even have a copyright notice, if needed. Lots of variables when you use a database.

If theres a limited number of images in each set (I dont know) I would use a javascript array of objects instead of looking in the folder for the images names, yes it needs to be done manually if you dont use any server side solution but its possible depending on the number of images in each set which we dont know.

[BenPleysier]

I just want you to show me:

I could give you the whole process using 5 lines of  php in combination with the browsers inbuilt fetch API. 

[osgood_]

I just want you to show me:

I could give you the whole process using 5 lines of  php in combination with the browsers inbuilt fetch API. 

By @BenPleysier

Why, you use node, you have no interest in php, you've made that clear enough, which is fine. All  you need to do is create an api endpoint to a php file with 5 lines of code which scans directories based on a url parameter sent from the buttons on your image gallery page, echo the results out encoded to json format, that's it. Fetch will get the response from which you can use client side javascript to manipulate the response.

[BenPleysier]

Why don't you just say that it cannot be done and was an other exaguration without basis.

[osgood_]

Why don't you just say that it cannot be done and was an other exaguration without basis.

By @BenPleysier

Because it can be done. 

I dont know what your misreading which is causing you to get agitated maybe the whole thing in 5 lines of code. I said 5 lines of php code in combination......what can't be done.

Youre obviously out of touch l would assume given the current methods you use. I dont know, what do you want me to say........this is basic coding knowledge that any reasonable coder could do in minutes. I've even gone so far as to detail the steps in my previous post, you're a coder or are you. If so you would be able to see a clear path of how it's possible

Had the OP not been so insulting l would have been only too willing to share the solution, but anyone that calls my integrity and application into question will get zero help from me.

[Nancy OShea]

In the interest of expediance,  below is a PHP solution that I wrote some time ago.  No database required.  The script traverses through a folder of thumbnails and a folder of full-sized slides on your server.   The layout is CSS Flexbox.  The viewer is Fancybox (if used commercially, you must purchase a license from Fancybox.)

1. Copy & paste code into a new document. 
2. SaveAs gallery.php. 
3. Upload gallery.php and folders of images to a PHP supporting server.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dynamic Responsive Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Fancybox Viewer-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" rel="stylesheet">

<style>
/**Masonry Styles**/
.masonry {
	text-align: center;
	/**space between columns**/
	-webkit-column-gap: 1rem;
	column-gap: 1rem;
	/**number of columns**/
	-webkit-column-count: 5;
	-moz-column-count: 5;
	column-count: 5;
}
.masonry img {
	width: 100%;
	/**optional white space around images**/
	padding: 1px;
}
/**Tablets**/
@media (max-width: 1024px) {
.masonry {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
}
/**Mobile Phones**/
@media (max-width: 500px) {
.masonry {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
}
</style>
</head>
<body>
<h3>Responsive Masonry Gallery</h3>
<p>This page is dynamically populated from a folder of images with PHP code. No database required. The layout is CSS Flexbox. The lightbox viewer is 
<a href="https://fancyapps.com/fancybox/3/">Fancybox 3</a>.</p>
<hr>
<div class="masonry"> 
<!--begin dynamic gallery-->
<?php 
$directory = '../FOLDER/folder/thumbnails'; //path to thumbnails
$link = '../FOLDER/folder/slides'; //path to full-sized images
$allowed_types = array('jpg','jpeg','png'); 
$aFiles = array(); 
$dir_handle = @opendir($directory) or die("There is an error with your image directory!"); 
while ($file = readdir($dir_handle))  //traverse through directory
{ 
if($file=='.' || $file == '..') continue; //skip links to parent directories

$file_parts = explode('.',$file); //split file parts and put each into an array

$ext = strtolower(array_pop($file_parts)); //last part is extension

$title = implode('.',$file_parts); //whats left is filename

$title = htmlspecialchars($title); //make the filename html-safe

if(in_array($ext,$allowed_types)) 
{   
$aFiles[] = $file;
}
} 
closedir($dir_handle); //close directory
natsort($aFiles); // natural sort filenames
$aFiles = array_reverse($aFiles); //display in reverse order
$i=0; //loop
foreach ($aFiles as $file) { //repeat as before
$file_parts = explode('.',$file); 
$ext = strtolower(array_pop($file_parts)); 
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);
echo '
<a data-fancybox="gallery" class="fancybox" data-slide="'.++$i.'" href="'.$link.'/'.$file.'"><img alt="'.$title.'" src="'.$directory.'/'.$file.'"></a>';
}
?>
<!--/masonry--> 
</div>
<!--end thumbnails--> 
<!--counter-->
<p class="text-muted">Last updated: March, 2022 &nbsp; | &nbsp; File count:
<?php
$directory = "../FOLDER/folder/slides";
if ( glob( $directory . "*.jpg" ) != false ) {
$filecount = count( glob( $directory . "*.jpg" ) );
echo $filecount;
} else {
		echo 0;
}
?>
</p>

<!--jQuery Core library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

<!--Fancybox Viewer--> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script> 
<script>
$( document ).ready( function () {
  $( '.fancybox' ).fancybox( {
    protect: true
  } );
} );
</script>
</body>
</html>

Would I do this differently today?  Yes.  But a looming deadline takes priority.

Good luck!

[osgood_]

That's not really what the OP requires from my understanding. They require a dynamic solution which will let the user choose images from a set of folders based on what button/s is clicked on the page, more like a filtering system.

I guess they could copy and repeat your code for however many number of folders of images they have and link the buttons to each page in question, which would get the job done, but it's not a very graceful solution and would require a page refresh for each page.

Needs must l guess.

[Nancy OShea]

I agree 100% that a database is preferred for many reasons. 

This is good enough given the OP's limited coding know-how.