I am creating a website for a gaming server. One of the pages on the site is a photo gallery. I’ve created the gallery layout in a page called PhotoGallery.php. There are 3 options. The 1st is a radio input choosing either Photo or Video. The 2nd is a drop down menu that gets populated through a php function. This function locates the directory names in either /Images/Photo_Gallery/Pictures/ or /Video/Video_Gallery/Video/and echo back the directory names and option tags for the drop down. This menu is also hidden until the radio menu choice is made. This is done in a javascript function. This choice is then passed back to php to get the sub directories of the chosen path. The 3rd option another drop down menu that takes the value of the radio and the 1st drop down menu is populated with the directory names of the category folder if any. Then once all choices are made the gallery then displays all the pictures or videos Thumbnails found in that folder.
I have worked on this for 2 weeks now and can’t seem to get it working properly to populate the menus. I get the menu to show up but no option inside of it. Is there something wrong with my syntax or logic or is there a better cleaner approach?
PhotoGallery.php // code <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Photo Gallery</title> <link rel="stylesheet" href="../../CSS/styles.css"> <link rel="stylesheet" href="../../CSS/photo_gallery.css"> <script src="../../Javascript/photo_gallery_functions.js"></script> </head> <header> <?php include "../../Website_Pages/Element_Pages/header.php" ?> </header> <body> <div class="photo_gallery_main_background_container"> <div class="left_nav_container"> <?php include "../../Website_Pages/Element_Pages/leftmenu.php" ?> </div> <div class="photo_gallery_main_container"> <h1>COMMUNE GALLERY</h1> <div class="background_container"> <div class="gallery_header" id="gallery_header"> <h2>"Collection"</h2> <div class="drop_down_menu_container" id="drop_down_menu_container"> <form action="../../PHP/photo_gallery_functions.php" method= "post"> <input type="radio" id="media_type_photo" name="media_type" value="Photo" checked="checked" onclick= showDropdown()> <label for="media_type_photo">Photo</label> <br> <input type="radio" id="media_type_video" name="media_type" value="Video" onclick= showDropdown()> <label for="media_type_video">Video</label> <br> <input type="submit" value="Submit"> </form> <br> <form action="../../PHP/photo_gallery_functions" method="get"> <select id="collection_menu" name="collection" style="display: none;"> <?php include "photo_gallery_functions.php"; media_type_choice ($media_type); ?> </select> </form> <br> <form action="../../PHP/photo_gallery_functions.php" method="get"> <select id="gallery_menu" name="gallery" style="display:none;"> <?php include "photo_gallery_functions.php"; collection_choice ($collection, media_type_gallery: $media_type_gallery) ?> </select> </form> <br> </div> <div class ="image_scrollbox_continer"> <div class="image_scrollbox" style="overflow: auto;"> <ul class = "image_gallery" id="image.gallery" style="display: none;"> <?php include "photo_gallery_functions.php"; thumbnailPreview ($media_type_gallery, $collection_gallery, $gallery_choice_gallery); ?> </ul> </div> </div> </div> </div> </div> </div> </body> <footer> <?php include "../../Website_Pages/Element_Pages/footer.php" ?> </footer> </html> // photo_gallery_funxtions.php <?php $media_type_gallery = "$media_type"; function media_type_choice ($media_type) { if ($media_type == "Photo") { $directoryPath= "/Images/Photo_Gallery/Pictures/"; $contents = scandir($directoryPath); $directories= array_filter ($contents, function ($item) use ($directoryPath) { return is_dir($directoryPath."/". $item) && $item !== "." && $item !=="..";}); foreach ($directories as $directory) { echo "<option id='photo_collection' name='photo_collection' value='$directory' onclick= showDropdownGallery()></option>"; } } else if ($media_type == "Video"); { $directoryPath= "/Video/Video_Gallery/Video"; $contents = scandir($directoryPath); $directories= array_filter ($contents, function ($item) use ($directoryPath) { return is_dir($directoryPath."/". $item) && $item !== "."&& $item !== "..";}); foreach ($directories as $directory) { echo "<option id='video_collection' name='video_collection' value='$directory' onclick= showDropdownGallery()></option>"; } } } function collection_choice ($collection, $media_type_gallery) { if ($media_type_gallery == "Photo") { $directoryPathGallery= "/Images/Photo_Gallery/$collection/"; } else if ($media_type_gallery == "Video"); { $directoryPathGallery= "/Video/Video_Gallery/$collection/"; } $contents = scandir($directoryPathGallery); $directoriesGallery= array_filter ($contents, function ($item) use ($directoryPathGallery) { return is_dir($directoryPathGallery."/". $item) && $item !== "."&& $item !== "..";}); foreach ($directoriesGallery as $directoryGallery) { echo "<option id='gallery_choice' name='gallery_choice' value='$directoryGallery' onclick=showThumbnails()>$directoryGallery</option>"; } } function thumbnailPreview ($media_type_gallery, $collection_gallery, $gallery_choice_gallery) { if ($media_type_gallery == "Photo") { $gallery_type = "/Images/Photo_Gallery/"; } else if ($media_type_gallery == "Video"); { $gallery_type= "/Video/Video_Gallery/"; } $directoryPathImage= "$gallery_type/Thumbnails/$collection_gallery/$gallery_choice_gallery/"; $contentsImage= scandir($directoryPathImage); $directoriesImage= array_filter ($contentsImage, function ($item) use ($directoryPathImage) { return is_file($directoryPathImage."/". $item) && $item !== "."&& $item !== "..";}); foreach ($directoriesImage as $directoryImage) { if ($media_type_gallery == "Photo") { $thumbnail = "<img src='/Images/Photo_Gallery/Thumbnails/$collection_gallery/$gallery_choice_gallery/$directoryImage.png' alt='$directoryImage' width='100px' height='100px'>"; echo "<a href='/Images/Photo_Gallery/Pictures/$collection_gallery/$gallery_choice_gallery/$directoryImage.png' target='_blank'>$thumbnail</a>"; } else if ($media_type_gallery == "Video"); { $videoThumbnail = "<img src='/Video/Video_Gallery/Thumbnails/$collection_gallery/$gallery_choice_gallery/$directoryImage.png' alt='$directoriesImage' width='100px' height='100px'>"; echo "<li id='thumbnail'><a href='/Video/Video_Gallery/Video/$collection_gallery/$gallery_choice_gallery/$directoriesImage.mp4 target='_blank'>$thumbnail</a></li>"; } } } ?>