The simplest image viewer known to man has been created. Visión uses a light touch of PHP, Javascript and CSS to create a straightforward, stylish image viewer. It can be incorporated into any website in under three minutes and takes up less than 20kb of space. Stop reading this and download Visión.

This article covers how to use Visión. To learn more about Visión, check this out.

Setup Vision

If you haven’t already done so, download a copy of Visión and unzip it to any location that’s able to parse PHP files, like localhost.

For a basic install of Visión, the only file you need to edit is index.php:

/**  setup  **/
$imgDir	= "img"; 		 // image directory
$imgSub	= false;		 // include sub directories when gathering images?
$imgId	= "lgImage"; 	 // id tag for images

To successfully pull images from your images folder, edit $imgDir accordingly. The above example would be looking for images in a folder called “img”, located in the same directory as the index.php file you are editing.

If you would also like to include images located in folders within the images folder you’ve specified, set the $imgSub variable to true. If $imgSub remains set to false, all sub folders within the specified images folder will be ignored.

Lastly, you may choose to specify the id used for your image on display. Under most circumstances, you won’t have to change this value.

Integrate Vision

Once you’ve got the index.php edited to your liking, integrating Visión into a web application of your choice is a matter of copying and pasting a few lines of code.

Make sure all the PHP code (lines 1-11) is copied, along with the javascript code (lines 25-37), and content within the id="content" div.

Easy, Huh?

That wasn’t too hard, right? If you’ve hacked/tweaked/etc Visión for your website, let me know.