PHP - Gallery Layout Help

This topic has been moved to PHP Freelancing.

http://www.phpfreaks.com/forums/index.php?topic=342417.0

Hi guys,

Just after a bit of advice really. I want to create an image gallery. Currently, my images (which are sourced from a DB) are brought about in a loop and set in their own div, side by side. I was just thinking though: would it be better to do this with an array? Its a bit difficult coding for this just using the basic loop. Anyone have any suggestions to make this better?

PS, here is my current code:

$sql =  "SELECT * FROM imagegal";
 if ($result = mysql_query($sql)) {
    if (mysql_num_rows($result)) {
   
while($row = mysql_fetch_array($result)){
   
   echo '<span class="imagegal">';
   echo '<span><img src="' . $row['image'] . '"</span>';
   echo '</span>';
   
}}}   

Hello,

I am trying to make a picture gallery for my website but i am having a problem with the size of the pictures.
When i go to the picture gallery i want to see the pictures that i have stored in the pictures file, in a small scale and not in full resolution. My problem is that i have managed to create this picture gallery but i have failed in seeing the pictures in a small scale. So when i go to the picture gallery i see all of my pictures in full resolution. Imagine how that is.

The code i use is:

Quote

<?php
    $pics= ("pics/");
    $cols= 4;


    if ($handle = opendir($pics))
    {
        while (FALSE !== ($file= readdir($handle)))
        {
            if ($file != "." && $file != ".." && $file != rtrim($pics, "/"))
            {
                $files[]=$file;
            }
        }
        closedir($handle);
    }

 $colsCtr= 0;

 echo '<table width="100%" cellspacing="10"><tr>';

 foreach($files as $file)
 {
     if ($colsCtr%$cols == 0)
         echo '</tr><tr><td colspan="2"><hr /></td></tr><tr>';
         echo '<td align="center"><a href="' . $pics . $file . '"><img src="' . $pics . $file . '" /></a></td>';
         $colsCtr++;
 }
 echo '</table>' . "\r\n";
?>



Can some one please tell me what is wrong with the code?

Can you please tell me what to add or what to remove so that this works?

Please not that i want to see the pictures at small scale first and when i click on each picture see the full resolution.

Thanks in advance.

My gallery is making thumbs fine and listing them aswell. The pagination works fine but i cannot handle with these errors whose show under the thumbs in webiste. Seems like the code in else if statement is missing arguments :S, Let's take a look !

Warning: Missing argument 1 for makeThumb(), called in D:\xampp\htdocs\website\galerija\index.php on line 167 and defined in D:\xampp\htdocs\website\galerija\index.php on line 136

Warning: Missing argument 2 for makeThumb(), called in D:\xampp\htdocs\website\galerija\index.php on line 167 and defined in D:\xampp\htdocs\website\galerija\index.php on line 136

Warning: imagesx() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 145

Warning: imagesy() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 145

Warning: Division by zero in D:\xampp\htdocs\website\galerija\index.php on line 150

Warning: imagecreatetruecolor() [function.imagecreatetruecolor]: Invalid image dimensions in D:\xampp\htdocs\website\galerija\index.php on line 152

Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\website\galerija\index.php on line 153

Warning: imagedestroy() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\website\galerija\index.php on line 161

Warning: imagedestroy() expects parameter 1 to be resource, null given in D:\xampp\htdocs\website\galerija\index.php on line 162

That's the "problem" code which appears under pictures

function getPictures() {
global $page, $per_page, $has_previous, $has_next;
if ( $handle = opendir(".") ) {
$lightbox = rand();
echo '<ul id="pictures">';

$count = 0;
$skip = $page * $per_page;

if ( $skip != 0 )
$has_previous = true;

while ( $count < $skip && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' )
$count++;
}
$count = 0;
while ( $count < $per_page && ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
if ( ! is_dir('thumbs') ) {
mkdir('thumbs');
}
if ( ! file_exists('thumbs/'.$file) ) {
makeThumb( $file, $type );
}
echo '<li><a href="'.$file.'" rel="lightbox['.$lightbox.']">';
echo '<img src="thumbs/'.$file.'" alt="" />';
echo '</a></li>';
$count++;
}
}
echo '</ul>';

while ( ($file = readdir($handle)) !== false ) {
if ( !is_dir($file) && ($type = getPictureType($file)) != '' ) {
$has_next = true;
break;
}
}
}
}

function getPictureType($file) {
$split = explode('.', $file); 
$ext = $split[count($split) - 1];
if ( preg_match('/jpg|jpeg/i', $ext) ) {
return 'jpg';
} else if ( preg_match('/png/i', $ext) ) {
return 'png';
} else if ( preg_match('/gif/i', $ext) ) {
return 'gif';
} else {
return '';
}
}

function makeThumb($file, $type) {
global $max_width, $max_height;
if ( $type == 'jpg' ) {
$src = imagecreatefromjpeg($file);
} else if ( $type == 'png' ) {
$src = imagecreatefrompng($file);
} else if ( $type == 'gif' ) {
$src = imagecreatefromgif($file);
}
if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
$newW = $oldW * ($max_width / $oldH);
$newH = $max_height;
} else {
$newW = $max_width;
$newH = $oldH * ($max_height / $oldW);
}
$new = imagecreatetruecolor($newW, $newH);
imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
if ( $type == 'jpg' ) {
imagejpeg($new, 'thumbs/'.$file);
} else if ( $type == 'png' ) {
imagepng($new, 'thumbs/'.$file);
} else if ( $type == 'gif' ) {
imagegif($new, 'thumbs/'.$file);
}
imagedestroy($new);
imagedestroy($src);
}
And these are my 3 functions i use to do that all i think no more source is needed even those 2 functions aren't needed, the only problem as i see is in makeThumb function

Hi All,

I am looking for a php script that i can use to create a php image gallery for a client.
The script needs to allow the client to upload an image (any image type) jpg,gif,png etc and then a thumbnail needs to be created.So there will be two images the original and the thumbnail which should be stored in separate directories.

I know that this has been done before and i did some google searches ,but cant find anything that i need.


Thanks in advance.


Kind Regards,
Nathan

how to create php gallery with pagination and also add new images that control by admin

The code below works well and shows all the images in a folder in reverse chronological order. But I want to limit it to a certain number of images .   This would enable me to have several pages of images.

So the first page would display the latest 50 images, the second page would show 50-100, and the third, 100-150.

Any helps on how to modify? I can create the pages manually. I just want to know how to limit the current page to a certain range.
Code: [Select]
<?php

//Your folder
$files = glob("images/*.*");

function sortnewestfilesfirst($a, $b) {
    return filemtime($b) - filemtime($a);
}
usort($files, "sortnewestfilesfirst");

$colCnt=0;
echo '<table border="0" style="width:1000px;">';

for ($i=0; $i<count($files); $i++)
  {
  $colCnt++;
  if ($colCnt==1)
  echo '<tr>';
  echo '<td width="20%" style="font-size:8.5px; font-family:arial">';

  $num = $files[$i];
   
echo ' 
  <div class="ImgBorder">
   <div class="clipout">
    <div class="clipin"> <a href="' . $num . '" rel="lightbox[all]"><img class="thumb ImgBorder" src="'.$num.'">  
</a> </div>
   </div></div>'."&nbsp;&nbsp;";


  echo '</td>';

  if ($colCnt==6)
    {
    echo '</tr>';
    $colCnt=0;
    }
  }

echo '</table>';
?>

Hello.  I am rolling my first-ever e-commerce site, and could use some help on designing a product gallery.

My site will be selling books and guides, and similar to what you might see on Amazon or Barnes & Noble, I want to create a product gallery which displays all products for a given category.

For simplicity, let's say that I am only selling paper books, and that is what I want to display - so for the purposes of this conversation, no need to filter on product type.

When a user clicks on the product catalog, I was thinking of simply displaying all products (e.g. eBooks) in  gallery containing thumbnails in a grid arrangement.  The user would click on the thumbnail - which would be the cover of the book - and then be taken to a product page which would have all of the details, including: a larger thumbnail of the book, book title, description, price, author, etc.

I suppose I could have a test title and description below each thumbnail?

Anyways, I am a little uncertain of how all of this would work from a technical standpoint?!

I guess I was thinking that each thumbnail would have a link behind it, which would then load my "product_details.php" page AND pass along something like a "ProductID" in the URL, so that my product_details.php" script could query my database and pull up the book's details.

How does that sound?

I look forward to hearing what you PHP gurus have to say!!  🙂

 

 

Hi all, i've set this script for my gallery, it works, it display me the name of the albums, but when i click to see the pictures inside, the page is blank, and also don't appear the "Back to the albums" link, i can't find the error in the code... 

Code: [Select]
<html>
<head>
<script type="text/javascript" src="../lightbox2.05/js/lightbox.js">
</script>
</head>
<body>   
<?php  
$page = $_SERVER['PHP_SELF'];  
//settings 
$column = 5;  
//directories 
$base = "carrelli_noleggio"; 
$thumbs = "thumbs";  
// get album 
$get_album = $_GET['album'];  
//if no album selected 
if (!$get_album) {     
echo "<b>Select an album:</b><p />";  
//find each album and display as links 
$handle = opendir($base);     
while (($file = readdir($handle))!==FALSE)     
{ 
if (is_dir($base."/".$file) && $file != "." && $file != ".." && $file != $thumbs)        
{             
echo "<a href='$page?album=$file'>$file</a><br />";         
}     }     
closedir($handle); } 
else {     
//check if album exist, and additional security checks     
if (!is_dir($base."/".$get_album) || strstr($get_album,".") !=NULL || strstr($get_album,"/") !=NULL || strstr($get_album,"\") !=NULL)     {     
echo "Album doesn't exist.";     } 
else {    
$x = 0;     
echo "<b>$get_album</b><p />";     
$handle = opendir($base."/".$get_album); 
while (($file = readdir($handle)) !== FALSE)     
{         
if ($file != "." && $file != "..")        
{         
echo "<table style='display:inline;'><tr><td><a href='$base/$get_album/$files' ref='lightbox'<img src='$base/$thumbs/$file' height='100' width'100'></a></td></tr></table>"; 
$x++; 
if ($x==$column)         
{ 
echo"<br />";             
$x = 0;         
}     
  }   
    }     
closedir($handle);          
echo "<p /><a href='$page>Back to albums</a>";  } } 
?>
</body>
</html>

Hi, I have a game image gallery using arrays to hold the current images, and when you go to a new location, like "newLocation=2" , it goes to a new array of background images. The problem is, when I try it in my browser, and I put in a new array of image for like, "location 2", The image doesn't show up, the images from location 1 show up. This is driving me nuts because I want to start adding content to the zones of my game already.LOL!. If anyone can help please I'd be very grateful. Thank you. Derek

ok, here is the code to the page, I only included the parts of the page that are relevant to what I am talking about.

Code: [Select]
<?php

session_start();




 
 
//$currentBackground='';
$echoLocation='';
$player='';
$monsters='';
$_SESSION['player'] = $player;// set this right after they log in, run this once, eventually in database.
$_SESSION['monsters']=$monsters;

$currentMonsterLevel='';//get rid of this eventually and put in session variable cuz we use it on other pages.
$currentPlayerLevel='';
$error='';
$playerHp='';//get rid and make session var.
$monsterHp='';
$echoPlayerMana='';
$echoMonster='';
$echoSpell='';
$player='';
$monsters='';
$playerMessage='';
$monsterMessage='';
$currentPLayerLevel ='';  
}
}
 

  




 //////////////////////////////////////////////////////////////////////////////////
 /////////////////////////////GAME NAVIGATION AND MONSTER SEARCH CODE NOT FINISHED//////////////////////////////////
 
$locations[0] = array();
$locations[1] = array(
'background_images' => array(
"<img src='sundragon_environments/ocean/ocean1_FRAME.jpg'/>",
"<img src='sundragon_environments/ocean/ocean1_FRAME2.jpg'/>",
"<img src='sundragon_environments/ocean/ocean1_FRAME3.jpg'/>",
"<img src='sundragon_environments/ocean/ocean1_FRAME4.jpg'/>",
"<img src='sundragon_environments/ocean/ocean1_FRAME5.jpg'/>"
),
'monster_images' => array(
"<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>",
"<img src='sundragon_monsters_source/water/eel/eel_transp_FRAME.png '/>",
"<img src='sundragon_monsters_source/water/shark/shark_transp_FRAME.png'/>",
"<img src='sundragon_monsters_source/water/octalisk/octalisk_transp_FRAME.png'/>",
"<img src='sundragon_monsters_source/water/teardrop_ocean_protector/teardrop_ocean_protector.png'/>"
)
);
$locations[2] = array(
'backgroundImages' => array(
"<img src='sundragon_environments/shore/teardrop_shore/teardrop_shore.jpg'/>"
),
'monster_images' => array(
"<img src='sundragon_monsters_source/water/goldfish/goldfish.png'/>" 
)
);

if(isset($_GET['newLocation']))
{
$_SESSION['current_location']=$_GET['newLocation'];
}
 
if(!isset($_SESSION['current_location']) && !isset($_SESSION['current_background']) && !isset($_SESSION['currentMonster']))
{
$_SESSION['current_location'] = 0;
$_SESSION['current_monster'] = 0;
    $_SESSION['current_background'] = 0;
}

if($_SESSION['current_location'] != 0) {
if(!isset($_SESSION['current_background']) && !isset($_SESSION['current_monster']))
{
$_SESSION['current_monster'] = 0;
$_SESSION['current_background'] = 0;
}

if(isset($_GET['further']))
{ //below is- inside the locations array, teardrop ocean (1) the background image is 4(example)+1 is set, then 
//do this
if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']+1])) {
$_SESSION['current_background']+=1;
}
if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']+1])) {
$_SESSION['current_monster']+=1;
}
}
elseif(isset($_GET['back']))
{
if(isset($locations[$_SESSION['current_location']]['background_images'][$_SESSION['current_background']-1])) {
$_SESSION['current_background']-=1;
}
if(isset($locations[$_SESSION['current_location']]['monster_images'][$_SESSION['current_monster']-1])) {
$_SESSION['current_monster']-=1;
}
} 

$currentBackground=$_SESSION['background'][$_SESSION['current_background']];
$currentMonster=$_SESSION['monster'][$_SESSION['current_monster']];
} else {
//?newLocation=1 means set it to Teardrop ocean.
$currentBackground = '
<img src="aradia.jpg" width="256" height="328" border="0" usemap="#Map" />
<map name="Map" id="Map">
   <area shape="rect" coords="5,176,81,249" href="?newLocation=1"/> 
</map>';
$currentMonster = '';
}
 
 


 

?>
<!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" />

 
 
<title>Realm of the Sun Dragon</title>

<link rel="stylesheet" type="text/css" href="css/gamestyles.css">
<style type="text/css">
body {

 margin-top:-32px;
 padding:0;
 
color: gold;
}
table {
color: black;
}
.style8 {color: #000000}
</style>
</head>

<body oncontextmenu="return false;"> 

 

<div id="container">

<div id="monster_message"> <?php  echo "this is the monster battle and NPC talk window";?> </div>

 
 
 
 
 
 
<div id="currentWeapon">
   <img src="sundragon_interface_template/items/swords/sword_shrunk.png" width="190" height="65" /> </div>
   
 <div id="iframe_player_top_lft"  >
  <div id="left_player_stats"><table align="center" width="30" border="0">
    <tr>
     
      <td><strong>HP</strong></td>
      <td><strong><font color="red"><?php echo $playerHp;?></font></strong></td>
    </tr>
    <tr>
     
      <td><strong>MANA</strong></td>
      <td><strong><font color="green"><?php echo $echoPlayerMana;?></font></td>
    </tr>
    <tr>
     
      <td><strong>EXP</strong></td>
      <td><strong><font color="blue">999</font></strong></td>
    </tr>
    <tr>
     
      <td><strong>PLAT</strong></td>
      <td><strong><font color="white">999</font></strong></td>
    </tr>
  </table></div>
 
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"><strong><br />
      <span class="style8">Octalisk (Level <?php echo $currentMonsterLevel;?>) </span></strong>
      <br/>
       <strong><span class="style8">HP</span><font color="red"> <?php echo $monsterHp;?></font></strong> </p>
       
       
     
       
       
  <div id="spelleffectsleft" >
           
            <div class="divcenter">
              <div align="center">
                <div class="inline">
                <div align="center">spell</div>
                </div>
               
                <div class="inline">
                <div align="center">spell</div>
                </div>
               
                <div class="inline">
                <div align="center">spell</div>
                </div>
            </div>
            </div> <!--end divcenter-->
    </div><!--end spell effects-->
   
 
   
    <div id="bottomspellsleft" >
        <div class="divcenter">
            <div class="inline">
            <div align="center">spell</div>
            </div>
           
            <div class="inline">
            <div align="center">spell</div>
            </div>
           
            <div class="inline">
            <div align="center">spell</div>
            </div>
             
        </div> <!--end div center-->
 
  </div><!--end bottomspells-->
 
 
 
  </div><!-- end player div-->

 


<div id="iframe_spell_foreground"><?php echo $echoSpell;?></div>

<div id="iframe_monster_background"><?php echo $currentBackground;?></div>

<div id="iframe_transparent_monster"><?php echo $currentMonster;?></div>
 
 <!--not here-->
 

<div id="iframe_player_top_right"   >
  <table width="160" height="64" border="0" align= "center">
    <tr>
      <td width="160"><div align="center">
        <p><strong><br />
          Silverglade (Level: <?php echo $currentPLayerLevel;?>)<br />
        </strong></p>
        </div></td>
    </tr>
  </table>
 
 
 
    <div class="spelleffects" >
           
      <div class="divcenter">
           
                <div class="inline">
                <div align="center">spell</div>
                </div>
               
                <div class="inline">
                <div align="center">spell</div>
                </div>
               
                <div class="inline">
                <div align="center">spell</div>
                </div>
           
      </div>
    </div>
   
 
   
    <div class="bottomspells" >
      <div class="divcenter">
            <div class="inline">
            <div align="center">spell</div>
            </div>
           
            <div class="inline">
            <div align="center">spell</div>
            </div>
           
            <div class="inline">
            <div align="center">spell</div>
            </div>
             
      </div>
 
  </div>
 
</div>
 
 
 
 
<div id="iframe_chat_right">
the data from the chat message box will be output to this div</div>
 
  <!--not  here-->
 

 <div id="iframe_player_center_bottom" align="center" ><div style="display: inline;">
<form style="display: inline; margin: 0;" ...>
 <form style="display: inline; margin: 0;" action='gamestart_NEWEST.php' method='post'><input type='submit' name='attack' value='Attack'/><input type="submit" name="search" value="search" /><input type="submit" value="cast spell" name="spell" /><input type="submit" name="inventory" value="Inventory"/></form>
   
    <form style="display: inline; margin: 0;" method="get" action=""><input type="submit" value="go further" name="further" /> <input type="submit"value="Go back" name="back"/></form>
</form>
</div>
   
<div id="chat">
       
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

    <strong>Message:</strong> &nbsp; &nbsp; &nbsp;
    <textarea name="message"></textarea>
    &nbsp; &nbsp; &nbsp; &nbsp;
    <input type="submit" name="submit" value="Chat">
    <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">


</form>   </div></div></div>
 
 

 <!--not here-->
 
 
<div id="log_off"> <a href="logout.php"><strong>LOG OFF</strong></a> </div>

 



<!--not here-->








</div>
</body>
</html>

hello experts ! im new to php script, hope u guys able to help. thanks in advance  . I'm following a tutorial from this site: http://www.anyexample.com/programming/php/php_mysql_example__image_gallery_(blob_storage).xml

and i run the code, error occur    (i highlighted line 27) :
Parse error: syntax error, unexpected T_STRING in C:\xampp\htdocs\testing.php on line 27

This is my php script:
 <?php
$db_host = 'localhost'; // don't forget to change
$db_user = 'root';
$db_pwd = '123456';


$database = 'test';
$table = 'ae_gallery';
// use the same name as SQL table

$password = '123';
// simple upload restriction,
// to disallow uploading to everyone



////create sql-table
CREATE TABLE 'ae_gallery' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'title' varchar(64) character SET utf8 NOT NULL,
  'ext' varchar( 8 ) character SET utf8 NOT NULL,
  'image_time' timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  'data' mediumblob NOT NULL,
  PRIMARY KEY  (`id`)
);




if (!mysql_connect($db_host, $db_user, $db_pwd))
    die("Can't connect to database");

if (!mysql_select_db($ae_gallery))
    die("Can't select database");


// This function makes usage of
// $_GET, $_POST, etc... variables
// completly safe in SQL queries
function sql_safe($s)
{
    if (get_magic_quotes_gpc())
        $s = stripslashes($s);

    return mysql_real_escape_string($s);
}

// If user pressed submit in one of the forms
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    // cleaning title field
    $title = trim(sql_safe($_POST['title']));

    if ($title == '') // if title is not set
        $title = '(empty title)';// use (empty title) string

    if ($_POST['password'] != $password)  // cheking passwors
        $msg = 'Error: wrong upload password';
    else
    {
        if (isset($_FILES['photo']))
        {
            @list(, , $imtype, ) = getimagesize($_FILES['photo']['tmp_name']);
            // Get image type.
            // We use @ to omit errors

            if ($imtype == 3) // cheking image type
                $ext="png";   // to use it later in HTTP headers
            elseif ($imtype == 2)
                $ext="jpeg";
            elseif ($imtype == 1)
                $ext="gif";
            else
                $msg = 'Error: unknown file format';

            if (!isset($msg)) // If there was no error
            {
                $data = file_get_contents($_FILES['photo']['tmp_name']);
                $data = mysql_real_escape_string($data);
                // Preparing data to be used in MySQL query

                mysql_query("INSERT INTO {$table}
                                SET ext='$ext', title='$title',
                                    data='$data'");

                $msg = 'Success: image uploaded';
            }
        }
        elseif (isset($_GET['title']))      // isset(..title) needed
            $msg = 'Error: file not loaded';// to make sure we've using
                                            // upload form, not form
                                            // for deletion


        if (isset($_POST['del'])) // If used selected some photo to delete
        {                         // in 'uploaded images form';
            $id = intval($_POST['del']);
            mysql_query("DELETE FROM {$table} WHERE id=$id");
            $msg = 'Photo deleted';
        }
    }
}
elseif (isset($_GET['show']))
{
    $id = intval($_GET['show']);

    $result = mysql_query("SELECT ext, UNIX_TIMESTAMP(image_time), data
                             FROM {$table}
                            WHERE id=$id LIMIT 1");

    if (mysql_num_rows($result) == 0)
        die('no image');

    list($ext, $image_time, $data) = mysql_fetch_row($result);

    $send_304 = false;
    if (php_sapi_name() == 'apache') {
        // if our web server is apache
        // we get check HTTP
        // If-Modified-Since header
        // and do not send image
        // if there is a cached version

        $ar = apache_request_headers();
        if (isset($ar['If-Modified-Since']) && // If-Modified-Since should exists
            ($ar['If-Modified-Since'] != '') && // not empty
            (strtotime($ar['If-Modified-Since']) >= $image_time)) // and grater than
            $send_304 = true;                                     // image_time
    }


    if ($send_304)
    {
        // Sending 304 response to browser
        // "Browser, your cached version of image is OK
        // we're not sending anything new to you"
        header('Last-Modified: '.gmdate('D, d M Y H:i:s', $ts).' GMT', true, 304);

        exit(); // bye-bye
    }

    // outputing Last-Modified header
    header('Last-Modified: '.gmdate('D, d M Y H:i:s', $image_time).' GMT',
            true, 200);

    // Set expiration time +1 year
    // We do not have any photo re-uploading
    // so, browser may cache this photo for quite a long time
    header('Expires: '.gmdate('D, d M Y H:i:s',  $image_time + 86400*365).' GMT',
            true, 200);

    // outputing HTTP headers
    header('Content-Length: '.strlen($data));
    header("Content-type: image/{$ext}");

    // outputing image
    echo $data;
    exit();
}
?>
<html><head>
<title>MySQL Image Gallery Example</title>
</head>
<body>
<?php
if (isset($msg)) // this is special section for
                 // outputing message
{
?>
<p style="font-weight: bold;"><?=$msg?>
<br>
<a href="<?=$PHP_SELF?>">reload page</a>
<!-- I've added reloading link, because
     refreshing POST queries is not good idea -->
</p>
<?php
}
?>
<h1><i>Image gallery</i></h1>
<h2>Uploaded images:</h2>
<form action="<?=$PHP_SELF?>" method="post">
<!-- This form is used for image deletion -->

<?php
$result = mysql_query("SELECT id, image_time, title FROM {$table} ORDER BY id DESC");
if (mysql_num_rows($result) == 0) // table is empty
    echo '<ul><li>No images loaded</li></ul>';
else
{
    echo '<ul>';
    while(list($id, $image_time, $title) = mysql_fetch_row($result))
    {
        // outputing list
        echo "<li><input type='radio' name='del' value='{$id}'>";
        echo "<a href='{$PHP_SELF}?show={$id}'>{$title}</a> &ndash; ";
        echo "<small>{$image_time}</small></li>";
    }

    echo '</ul>';

    echo '<label for="password">Password:</label><br>';
    echo '<input type="password" name="password" id="password"><br><br>';

    echo '<input type="submit" value="Delete selected">';
}
?>

</form>
<h2>Upload new image:</h2>
<form action="<?=$PHP_SELF?>" method="POST" enctype="multipart/form-data">
<label for="title">Title:</label><br>
<input type="text" name="title" id="title" size="64"><br><br>

<label for="photo">Photo:</label><br>
<input type="file" name="photo" id="photo"><br><br>

<label for="password">Password:</label><br>
<input type="password" name="password" id="password"><br><br>

<input type="submit" value="upload">
</form>

Hi guys I am busy with a website for myself and need some help on this, because I am stuck and not getting this right.    Can someone tell me where is a tutorial or where I can find a code to help me with this , I have attached a pictures on what I need and want. the second image is what need to happen when someone click on the image in the Portfolio   Below Is the html code for this Portfolio Gallery but need it to be like in a database where I can upload or add new work.   

 <!-- PORTFOLIO -->
               <div class="row portfolio-page">
                  <div class="hide" id="project-info">
                     <div id="content">
                        <i class="fa-times fa back"></i>
                        <div class="row">
                           <div class="large-11 columns">
                              <h2 class="project-title">Super Design</h2>
                           </div>
                           <div class="large-6 columns">
                              <div class="project-images">
                                 <div class="item-list">
                                    <ul class="">
                                       <li>
                                          <a href="#">
                                          <img width="500" height="380" alt="13tndZF" class="attachment-project-thumb" src="assets/images/12.jpg">  
                                          </a>
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                           </div>
                           <div class="large-6 columns project-content">
                              <p>Donec pulvinar porttitor felis ac tincidunt. Quisque sit amet ligula quis lacus pellentesque luctus consequat aliquam neque. Nunc ac elit eu odio consequat rutrum. Suspendisse nec facilisis turpis. </p>
                              <p>Proin egestas nisl in nibh condimentum, nec ornare erat egestas. Fusce dui est, gravida ut sem vitae, tincidunt pharetra massa. In erat libero, fermentum suscipit pretium vel, eleifend vitae odio. Nullam quis mi velit. Cras ut aliquet orci.</p>
                              <p>Curabitur sollicitudin massa quis magna cursus, a auctor dolor imperdiet. Nullam ultrices pretium mauris, vel fermentum nisl venenatis ac. Aenean adipiscing lorem a purus viverra, eu</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <ul class="small-block-grid-1 large-block-grid-3">
                     <li class="article portfolio-item" id="160">
                        <figure>
                           <img width="500" height="380" src="assets/images/12.jpg" alt="13tndZF" />
                           <figcaption class="text-center">
                              <h3>Super Design</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="157">
                        <figure>
                           <img width="500" height="380" src="assets/images/13.jpg" alt="1j5JfNg" />
                           <figcaption class="text-center">
                              <h3>Cool Project</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="153">
                        <figure>
                           <img width="500" height="380" src="assets/images/14.jpg" alt="1m7ZhI3" />
                           <figcaption class="text-center">
                              <h3>New Project</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="94">
                        <figure>
                           <img width="500" height="380" src="assets/images/15.jpg" alt="1a2n0Ck" />
                           <figcaption class="text-center">
                              <h3>Sed porttitor</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="79">
                        <figure>
                           <img width="500" height="380" src="assets/images/16.jpg" alt="7714491824_ef36a096ff_b" />
                           <figcaption class="text-center">
                              <h3>Kid Play</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="73">
                        <figure>
                           <img width="500" height="380" src="assets/images/17.jpg" alt="8364043731_9da828b5c7_h" />
                           <figcaption class="text-center">
                              <h3>Project Two</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="71">
                        <figure>
                           <img width="500" height="380" src="assets/images/18.jpg" alt="almond-blossom-5378_1280" />
                           <figcaption class="text-center">
                              <h3>Project One</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="96">
                        <figure>
                           <img width="500" height="380" src="assets/images/19.jpg" alt="Youthful learners" />
                           <figcaption class="text-center">
                              <h3>Etiam at commodo</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                     <li class="article portfolio-item" id="14">
                        <figure>
                           <img width="500" height="380" src="assets/images/20.jpg" alt="9862145525_c08b245398_h" />
                           <figcaption class="text-center">
                              <h3>Project 1</h3>
                           </figcaption>
                        </figure>
                        <span class="plus-icon flipOutX"><i class="fa-plus fa"></i></span>
                     </li>
                  </ul>
               </div>
               <!-- END PORTFOLIO/> -->
            </div>
         </section>

This is my code for a 'gallery' so to call on my website (http://www.thenourishedcanuck.com/blog/). I would like to introduce a hyperlink, so that I can link to an article, in with the caption. It works for the original image, but I would like to add different links to the captionbox when each image is called. (I.e. see the image that says 'why won't this work' - how can i make that sentence a hyperlink; something like that)

Any help or suggestions would be greatly appreciated!

p.s. this gallery only works on Firefox and Chrome; not on Internet Explorer

Here is the code for that portion:

<div>
   <div id="gallery">
      <div id="gallery-wrapper"><img class="output" src="<?php bloginfo('template_url'); ?>/images/img01.jpg" width="512" height="202" alt="" />
         <div class="caption-box"> <span class="caption">Nourished Canuck</span><span class="caption2">Welcome to the Nourished Canuck.</span></div>
         <br class="clear" />
         <ul class="thumbnails">
            <li><<img class="active" src="<?php bloginfo('template_url'); ?>/images/img01.jpg" title="Why won't this work?"></li>
            <li><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg"></li>
            <li><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg"></li>
         </ul>

         <br class="clear" />
      </div>
   </div>


   <script type="text/javascript">

                  $('#gallery').gallerax({
                     outputSelector:       '.output',               // Output selector
                     thumbnailsSelector:      '.thumbnails li img',      // Thumbnails selector
                     captionSelector:      '.caption',               // Caption selector
                     captionLines:         2,                     // Caption lines (2 lines)
                     fade:                'fast',                  // Transition speed (fast)
                  });

               </script>

   <!-- end -->
</div>