ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Create an Image Gallery without MySQL using JQuery LightBox

Updated on January 17, 2014

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.

Comments

    0 of 8192 characters used
    Post Comment

    • psychicdog.net profile image

      psychicdog.net 6 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
      Author

      Alpho011 6 years ago from Marietta, Georgia

      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?

    • profile image

      anri 6 years ago

      this script does not work proertly in opera ...

    • profile image

      Kenny Jensen 5 years ago

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

    Click to Rate This Article