![]() ![]() We position the image in the center of the background by specifying its position to be 50% 50%. ![]() This code (lines 28-39) consists of a div container, with a CSS class pic (and in some cases a nomargin, more on that later), and we set its background to the image file via the style attribute. If(($i+1)%4=0) $nomargin='nomargin' //the last image on the row is assigned the CSS class "nomargin"Ĭlosedir($dir_handle) //close the directoryīy traversing through the files in the directory and skipping the non-image files, we output some XHTML code for every image. If(in_array($ext,$allowed_types)) //if the extension is an allowable type $title = htmlspecialchars($title) //make the filename html-safe to prevent potential security issues $title = implode('.',$file_parts) //once the extension has been popped out, all that is left is the file name $ext = strtolower(array_pop($file_parts)) //the last element is the extension $file_parts = explode('.',$file) //split the file name and put each part in an array If($file='.' || $file = '.') continue //skip links to the current and parent directories While ($file = readdir($dir_handle)) //traverse through the files $dir_handle = or die("There is an error with your image directory!") $allowed_types=array('jpg','jpeg','gif','png') //allowed image types demo.php $directory = 'gallery' //where the gallery images are located The great thing about this strategy is that it is incredibly easy to set up a gallery, and adding images to an existing one is a charm - just dump them in the gallery's directory via FTP and it is ready to go. The idea is simple - our PHP back-end is going to scan a folder that we've set up with our gallery images, and turn it into a fancy CSS & jQuery gallery. Note the highlighted area - this is where we put our PHP code, that will generate the gallery images. demo.php Īnd that is basically all there is to it. There is no need to download the plug-in - I've included it in the demo files, so grab them and get on reading. Today we are going to build a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in. One of the main benefits of using a popular java script library, such as jQuery, is the incredible number of available plug-ins that will kick-start any development project. ![]()
0 Comments
Leave a Reply. |