Create an Image Gallery without MySQL using JQuery LightBox

Gallery without MySQL using JQuery

Creating this comes in three very easy steps:

1) Create a dir named "img".

2) FTP all the images that you want to be shown to that directory.

3) Paste and create and .php file using the following code.

<?php
function show_gallery_imgs(){
$str ="";
//create an array
$img_array = array();
//open dir
$img_dir = opendir("img");
while(($img = readdir($img_dir)) != false){
if(($img != ".") && ($img !='..') && ($img != 'index.php')){
$img_array[] = $img;
}
}
// how many rows to show per page
$rowsPerPage = 20;
// if $_GET['page'] defined, use it as page number
if(isset($_GET['p'])){
$pageNum = $_GET['p'];
}else{
// by default we show first page
$pageNum = 1;
}
// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;
$upperLimit = $rowsPerPage * $pageNum;
//count array items
$img_count = count($img_array);
echo '<div>';
//echo '<ul>';
for($i=$offset;$i<$upperLimit;$i++){
if($i == $img_count){
break;
}
echo '<a class="lightbox" title="' . str_replace("_", " " ,$img_array[$i]) . '" href="img/' . $img_array[$i] . '"><img height="175" style="background-color:#eee;border:1px dotted #000;padding:10px;margin:15px;position:relative;"';
echo ' src="img/'. $img_array[$i] . '"/></a>';
}
echo '</div>';
$maxPage = ceil($img_count/$rowsPerPage);
$self = $_SERVER['PHP_SELF'];
//start the navigation
if ($pageNum > 1){
//return;
$page = $pageNum - 1;
$prev = ' <a href="'. $self . '?m=14&p=' . $page . '#nav-link">PREV</a> ';
$first = ' <a href="' . $self . '?m=14&p=1#nav-link">FIRST</a> ';
}else{
$prev = ' PREV '; // we're on page one, don't enable 'previous' link
$first = ' LAST '; // nor 'first page' link
}
// print 'next' link only if we're not
// on the last page
if ($pageNum < $maxPage){
$page = $pageNum + 1;
$next = ' <a href="' . $self . '?m=14&p=' . $page . '#nav-link">NEXT</a> ';
$last = ' <a href="'. $self . '?m=14&p=' . $maxPage . '#nav-link">LAST</a> ';
} else{
$next = ' NEXT '; // we're on the last page, don't enable 'next' link
$last = ' LAST '; // nor 'last page' link
}
if($maxPage > 1){
// print the page navigation link
echo '<a name="nav-link"></a>';
echo '<div align="center"><span class="page_bg">' . $first . '</span>&nbsp;<span class="page_bg">'. $prev . '</span> <span>Page <strong>'. $pageNum . '</strong> of <strong>' . $maxPage . '</strong></span><span class="page_bg">' . $next . '</span>&nbsp;<span class="page_bg">' . $last . '</span></div>';
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://diadde.host22.com/img_gallery/js/jquery.js"></script>
<script type="text/javascript" src="http://diadde.host22.com/img_gallery/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="http://diadde.host22.com/img_gallery/css/jquery.lightbox-0.5.css" media="screen" />
<title>Gallery</title>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
</head>

<body>
<h2 style="text-align:center;">Gallery Images</h2>
<div style="width:1000px;margin:0 auto;">
<?php
show_gallery_imgs();
?>
</div>
</body>
</html>

4) FTP that .php file to directory outside of the "img" dir.

Example:

http://diadde.host22.com/img_gallery/gallery.php

Click on any image, it will give a popup (lightbox) to scroll thru the imgs.

You will need this, for the light box:

http://leandrovieira.com/projects/jquery/lightbox/

Have fun.

More by this Author


Comments 4 comments

psychicdog.net profile image

psychicdog.net 5 years ago

Haven't seen you around for ages Alph. Love your scripts especially since I work in php also. Thanks for sharing this - the lightbox effect is a real bonus - super fast too compared to other lightboxes I've seen.


Alpho011 profile image

Alpho011 5 years ago from Marietta, Georgia Author

Thank you, now that I have a domain to post to, I can leave examples to help, will set up links to DL some source code also, also is there a way to do some sort code box so I place the src code in the tuts?


anri 5 years ago

this script does not work proertly in opera ...


Kenny Jensen 4 years ago

This gallery is working ok, but are there a way to sort the images alphabeticaly?

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working