Hosting Solutions
mobile_logo Table of Contents

Multiple Album Photo Gallery Ajax PHP JSON Tutorial

In this lesson we demonstrate how to extend our basic gallery into a very lightweight multiple album dynamic photo gallery using Ajax, PHP and JSON. json_gallery_data.php <?php header("Content-Type: application/json"); $folder = $_POST["folder"]; $jsonData = '{'; $dir = $folder."/"; $dirHandle = opendir($dir); $i = 0; while ($file = readdir($dirHandle)) { if(!is_dir($file) && preg_match("/.jpg|.gif|.png/i", $file)){ $i++; $src = "$dir$file"; $jsonData .= '"img'.$i.'":{ "num":"'.$i.'","src":"'.$src.'", "name":"'.$file.'" },'; } } closedir($dirHandle); $jsonData = chop($jsonData, ","); $jsonData .= '}'; echo $jsonData; ?> JSON_tutorial_6.html <!DOCTYPE html> <html> <head> <style> body { margin:0px; background:#000; color:#CCC; } div#pagetop { position:fixed; background: #333; padding:20px; font-size:36px; width:100%; border-bottom:#000 1px solid; } div#thumbnailbox { float:left; margin-top:82px; width:120px; background:#292929; } div#thumbnailbox > div { width:100px; height:80px; overflow:hidden; margin:10px; cursor:pointer; } div#thumbnailbox > div > img { width:100px; } div#pictureframe { position:fixed; left:140px; top:100px; width:700px; text-align:center; } div#pictureframe > img { max-width:700px; } div#albummenubox { position:fixed; left:856px; top:100px; width:200px; background:#CCC; padding:12px; color:#000; border-radius: 10px; } </style> <script> function ajax_json_gallery(folder){ var thumbnailbox = document.getElementById("thumbnailbox"); var pictureframe = document.getElementById("pictureframe"); var hr = new XMLHttpRequest();"POST", "json_gallery_data.php", true); hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var d = JSON.parse(hr.responseText); pictureframe.innerHTML = "<img src='"+d.img1.src+"'>"; thumbnailbox.innerHTML = ""; for(var o in d){ if(d[o].src){ thumbnailbox.innerHTML += '<div onclick="putinframe(\''+d[o].src+'\')"><img src="'+d[o].src+'"></div>'; } } } } hr.send("folder="+folder); thumbnailbox.innerHTML = "requesting..."; } function putinframe(src){ var pictureframe = document.getElementById("pictureframe"); pictureframe.innerHTML = '<img src="'+src+'">'; } </script> </head> <body> <div id="pagetop">Dynamic JSON Ajax PHP Driven Image Gallery</div> <div id="thumbnailbox"></div> <div id="pictureframe"></div> <div id="albummenubox"> <h3>My Photo Albums</h3> <a href="#" onclick="return false" onmousedown="ajax_json_gallery('gallery1')">Gallery 1</a><br> <a href="#" onclick="return false" onmousedown="ajax_json_gallery('gallery2')">Gallery 2</a><br> <a href="#" onclick="return false" onmousedown="ajax_json_gallery('gallery3')">Gallery 3</a><br> </div> <script>ajax_json_gallery('gallery1');</script> </body> </html>

JavaScript Videos

JSON Programming

JSON Tutorial for Beginners Learn How to ProgramExternal JSON Data File Call In Using Ajax TutorialPHP Dynamic JSON Data File with Ajax ProcessingJSON PHP Ajax Post Dynamic Variable Data TutorialDynamic Photo Gallery JSON Ajax PHP TutorialMultiple Album Photo Gallery Ajax PHP JSON TutorialJSON Timed Ajax PHP MySQL Data Request Web ApplicationImage Cycle Application Programming Tutorial