A good example is XAMPP, which is free and can be downloaded from
Create a root folder – name it anything, and inside it, create the following folders: Download Timthumb script:
Finally, create a new script tag and add our line of code: The above code states that when the document is ready – grab all the anchor tags with an attribute value of “lightbox” and hook it up with the fancybox function.
You need to include that css as well: Now let’s add a “rel” attribute to our anchor tag, with a value of “lightbox”.This makes it easier for our script to target which elements to add an effect on.Take a look at the couple of images below: These images (available in the download) I’ve saved inside the root folder.In your – add these lines of code: The code above adds a nice texture to our gallery background.Download the latest version from and include it in your document. Once again, include the script right under the j Query one.
Note that Fancy box comes with its own image folder and css file.
– add, this line of code just in between the $(document).ready() function: This will insert an empty span tag inside each of our list items (this is for the small magnifying glass icon).
If you’re thinking – why not just add an inline span tag in our “for each” loop inside – that’s an excellent question.
Important: You should use the latest version of Tim Thumb due to vulnerability issues with old code.
Make sure you keep updated to keep your site secure. Let’s begin: In order for our PHP scripts to run, you need to have a web server.
You should have something like the screenshot below: As you can see – we’re swiftly on our way. This may not be the case with yours – but with me, I just decided to fix this by wrapping our list items inside an ‘if – else’ statement: Now we move on to the Fancy Box script: I almost always use j Query for all my projects.