How to Make Image Gallery in PHP with AJAX and Light-box

This is an article on How to Make Image Gallery in PHP with AJAX and Light-box in PHP.

Article is about making a simple yet powerful Gallery system using PHP, AJAX and Lightbox

Background

Some days ago i started ma new project im building our site (for the 4th time) Thought to do a real difference so everything i needed to code by me. Hope this will help you too.

The Code

Let's get started.

Steps:

Make a simple php script that can retrieve the records about images from the database and do the dynamic page breaking.

Adding the lightbox to have a little show off

Adding the AJAX part

PHP script

First thing we need is to make a php script that can retrieve all the records about the images and do page breaking. Here i used to store the info in a database rather than reading directly from a folder. This makes it possible for me to add an image description. So, when i retrieve the images possibly i want to do the dynamic page breaking, adding the pages automatically so there's no mess there.

$result = mysql_query("SELECT * FROM images LIMIT $eu,$limit");//In the above query the records are called from a specific no of records($limit) starting by a specified point($eu) ex: "SELECT * FROM images LIMIT 10,20" is thats what passed, Mysql will return records starting from the 10th records (including 10th) another 20 mean 10-39. This way page breaking is pretty simple :D

Light box is a very attrtactive feature used in many things today. In the code above you'll notice that the <img /> tag is full of other things which of course related to the lightbox. So first Download Lightbox.

Now extract all the directory where you have the view.php but DONT extract the index.html.

xmlhttp = new XMLHttpRequest(); //Make a new XML request. It is used to send the AJAX requests.xmlhttp.onreadystatechange=function() //This function retrieves the response from the page and shows it in the content area

{ if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("load_area").innerHTML=xmlhttp.responseText; }else{document.getElementById("load_area").innerHTML = "Loading please wait ...."; } }xmlhttp.open("GET","view.php?q="+no,true); //Here the resource path is view.php we made before. But now we have to adjust the code of view.php to suit with AJAX

xmlhttp.send();}window.onload = init; //At loading we load the 1st set of images to prevent errors</script>

With following through your beneficail advice, I started using it but I am having a little bit problem in doing so. Some images are showing up in one browser but some got blind in the other. As you can see my Services page, where I used some of the images
Please sir help me for this at the earliest....In need of your reply at the urgent.

i think you would be receiving problems with some older browsers [specially IE6/7] but i have tested on most of the newer ones without any prblem
can you direct me a link to check up the problem and state the browsers you were testing this on?