PHP/CSS Photo gallery help needed

yujikaido · April 4, 2010

I am working on photo gallery and i can do it in CSS/HTML but I need php to generate and the ability to page through my entire collection in order displaying 10 pictures per page. I need to give the users the ability to navigate to another view of the page that shows either the next or previous 10 photos as per the user's choice.

also I need to be able to hover over an image thumbnail about 75by75 pixels and when I hover it gives me the full size image of 450x450 pixels with a description. Here is my CSS/HTML below. I have looked on the forums and did alot of searching online but I can't find any php script to it, I found some java ones but I need one that will be just php to generate the output. I would appreciate any help with starting this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> My little neighborhood</title>

<style type="text/css">

a, a:visited, a:hover {}

#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}


</style>

</head>

<body bgcolor="#990000">
<div id="container">
<a class="pics" href="#nogo"><img class="thumb" src="images/fastfood-t.jpg" alt="" />
<span><img src="images/fastfood.jpg" alt="Fast food vendor in Thailand." title="Fast food vendor in Thailand." /><br />Fast food vendor in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/dhobighaut-t.jpg" alt="" />
<span><img src="images/dhobighaut.jpg" alt="Dhobi Ghaut (the place of laundry workers) in India." title="Dhobi Ghaut (the place of laundry workers) in India." /><br />Dhobi Ghaut (the place of laundry workers) in India.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/farmer-t.jpg" alt="" />
<span><img src="images/farmer.jpg" alt="A rice farmer with responsibilities in Thailand." title="A rice farmer with responsibilities in Thailand." /><br />A rice farmer with responsibilities in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/scaffold-t.jpg" alt="" />
<span><img src="images/scaffold.jpg" alt="Scaffolding for painting the building in Singapore." title="Scaffolding for painting the building in Singapore." /><br />Scaffolding for painting the building in Singapore.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/refugee-t.jpg" alt="" />
<span><img src="images/refugee.jpg" alt="Refugee camp in Thailand." title="Refugee camp in Thailand." /><br />Refugee camp in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/umbrella-t.jpg" alt="" />
<span><img src="images/umbrella.jpg" alt="Painting paper umbrellas in Thailand." title="Painting paper umbrellas in Thailand." /><br />Painting paper umbrellas in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/bamboohouse-t.jpg" alt="" />
<span><img src="images/bamboohouse.jpg" alt="A family dwelling within a refugee camp in Thailand." title="A family dwelling within a refugee camp in Thailand." /><br />A family dwelling within a refugee camp in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/motorcycle-t.jpg" alt="" />
<span><img src="images/motorcycle.jpg" alt="A family on the way to work and school in Thailand." title="A family on the way to work and school in Thailand." /><br />A family on the way to work and school in Thailand.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/rushhour-t.jpg" alt="" />
<span><img src="images/rushhour.jpg" alt="Early morning bicycle traffic in Vietnam." title="Early morning bicycle traffic in Vietnam." /><br />Early morning bicycle traffic in Vietnam.</span>
</a><a class="pics" href="#nogo"><img class="thumb" src="images/train-t.jpg" alt="" />
<span><img src="images/train.jpg" alt="People scurrying across the tracks before an oncoming passenger train in India." title="People scurrying across the tracks before an oncoming passenger train in India." /><br />People scurrying across the tracks before an oncoming passenger train in India.</span>
</a><span class="info"><h1>My neighbors</h1></span>
</div>

</body>
</html>

TeddyKiller · April 4, 2010

If they are placed in the database too, it'll be easy to do a photo gallery. You'll have for example..

thumbnail.php, this displays thumbnails of the images in the database. Click on one, and it sends you to image.php?id=photoid

Which displays the large image.

As for hovering over one, thats a different topic. I'm not entirely sure php can do this.

Jax2 · April 4, 2010

The hovering to show a larger image is pure css stuff I assume.

What you need help with, and can find tons of tutorials for all over the net is pagination, which uses limits and offsets inside your mysql query to show the next X number of pictures or the previous X number of pictures.

Jax2 · April 4, 2010

So yes, as the last person wrote, if you want to make life easier, have a database that contains all the links to the images ... then you can use pagination to show previous and next links.

yujikaido · April 4, 2010

Thanks for all the replies but I need to do this without a database. I need it to pull images from a images directory. I have seen some stuff on pagination, I will have to look up on it more. i am thinking i need to make a php file that loads the style sheet with my css styles in styles.css then load the contents of file containing the list of pictures and captions into an array. So I just need one php file and css stylesheet I think. Any help on how I can start my code or any scripts anyone know of that has the same functions. Thanks

yujikaido · April 4, 2010

Also I have all of my images already done cropped manually in thumbnails in 45x45 pixels and my large images already 450x450 so I don't need any functions to do that for me.

Jax2 · April 4, 2010

Here's a good tutorial on pagination with flat files:

http://www.codewalkers.com/c/a/Database-Articles/Multiple-Pages-of-Data-from-a-Text-File/1/

yujikaido · April 4, 2010

pagination seems a little complicated how about this

I use a shuffle() function to randomize the pictures in the array

Output a <div> with the id set to "container".

and use a loop to output the first 10 pictures in the randomized array via the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" title="styles" href="style.css" />
<?php 


list($picname,$picdesc) = explode('|',$pics[$index]);    
              echo <<<endmsg
<a class="pics" href="#nogo"><img class="thumb" src="$dir$picname-t.jpg" alt="" />
<span><img src="$dir$picname.jpg" alt="$picdesc" title="$picdesc" /><br />$picdesc</span>
</a>
endmsg

?>

[

Any suggestions

TeddyKiller · April 4, 2010

I produced a script of pagination for you.

This uses a database, but you'll need to change the queries (only 2) to work it out properly.

I commented each of the lines to make it easier for you to understand. - It's pretty damn good pagination too!

<?php
//Grabbing the results from the database
$result = mysql_query("SELECT * FROM tblname");
$numrows = mysql_num_rows($result);

$rowsperpage = 10; //How many get displayed per page
$totalpages = ceil($numrows / $rowsperpage); //Estimating the total of pages

//Getting the current page...
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
   $currentpage = (int) $_GET['page'];
} else {
//Could not retreive current page, so set it as 1
   $currentpage = 1;
}

//Checking if the current page is bigger than the total pages
if ($currentpage > $totalpages) {
//The current page is bigger, so display the results displayed on the last page.
   $currentpage = $totalpages;
}
//Checking if the current page is smaller than 1
if ($currentpage < 1) {
//The current page is smaller, so display the results dislpayed on the first page.
   $currentpage = 1;
}

$offset = ($currentpage - 1) * $rowsperpage; //Not sure about this, so dont change it
//Just change the query bit, do not change past "DESC LIMIT $offset, $rowsperpage" It IS needed.
$result = mysql_query("SELECT * FROM tblname DESC LIMIT $offset, $rowsperpage") or trigger_error('Query failed: '. mysql_error());

//Displaying the results in an loop.
while ($list = mysql_fetch_assoc($result)) {
      echo "Images get displayed here.";
  echo "EG:";
  echo "<img src=\"".$list['image']."\" border=\"0\" />";
}
echo 'Pages: '; //Echo the word Pages

$range = 3; //Page range on display. range 3, will display '1,2,3' or '2,3,4' for example

//if current page is bigger than 1...
if ($currentpage > 1) {
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back 1 page
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$prevpage'><</a> ";
}
else
{
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back to the first page as you dont need to go back to prev page as you aren't past page 1.
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><</a> ";
}

//This little function echo's the page numbers etc at the bottom.
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   if (($x > 0) && ($x <= $totalpages)) {
      if ($x == $currentpage) {
         echo " [<b>$x</b>] ";
      } else {
         echo " <a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a> ";
      }
   } 
}

//If the current page isn't the maximum number of pages 
if ($currentpage != $totalpages) {
   $nextpage = $currentpage + 1;
   //Display > to go to next page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}
else
{
//Display > to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}
?>

yujikaido · April 4, 2010

Hey many thanks looks great, so all I need to do is tell it to read an image directory instead of a database and add my style.css script to it ? I haven't started learning about sql databases yet. Are these changes below correct?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" title="styles" href="style.css" />
</head>

<?php
//Grabbing the results from the database
$result = /images("SELECT * FROM tblname");          ##  Is this correct if I want it to read from images directory?
$numrows = mysql_num_rows($result);                   ## Not to sure what to put here?

$rowsperpage = 10; //How many get displayed per page
$totalpages = ceil($numrows / $rowsperpage); //Estimating the total of pages

//Getting the current page...
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
   $currentpage = (int) $_GET['page'];
} else {
//Could not retreive current page, so set it as 1
   $currentpage = 1;
}

//Checking if the current page is bigger than the total pages
if ($currentpage > $totalpages) {
//The current page is bigger, so display the results displayed on the last page.
   $currentpage = $totalpages;
}
//Checking if the current page is smaller than 1
if ($currentpage < 1) {
//The current page is smaller, so display the results dislpayed on the first page.
   $currentpage = 1;
}

$offset = ($currentpage - 1) * $rowsperpage; //Not sure about this, so dont change it
//Just change the query bit, do not change past "DESC LIMIT $offset, $rowsperpage" It IS needed.
$result = /Images("SELECT * FROM tblname DESC LIMIT $offset, $rowsperpage") or trigger_error('Query failed: '. mysql_error());

//Displaying the results in an loop.
while ($list = /Images($result)) {        ## this corrrect?
      echo "Images get displayed here.";
  echo "EG:";
  echo "<img src=\"".$list['image']."\" border=\"0\" />";
}
echo 'Pages: '; //Echo the word Pages

$range = 3; //Page range on display. range 3, will display '1,2,3' or '2,3,4' for example

//if current page is bigger than 1...
if ($currentpage > 1) {
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back 1 page
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$prevpage'><</a> ";
}
else
{
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back to the first page as you dont need to go back to prev page as you aren't past page 1.
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><</a> ";
}

//This little function echo's the page numbers etc at the bottom.
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   if (($x > 0) && ($x <= $totalpages)) {
      if ($x == $currentpage) {
         echo " [<b>$x</b>] ";
      } else {
         echo " <a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a> ";
      }
   } 
}

//If the current page isn't the maximum number of pages 
if ($currentpage != $totalpages) {
   $nextpage = $currentpage + 1;
   //Display > to go to next page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}
else
{
//Display > to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}
?>

</html>

TeddyKiller · April 5, 2010

Do you have a webhost, or xampp to test your site on, if so.. why not create a database. It's not as hard as you think- when you use PHPMyAdmin. It's pretty straight forward. Having a database makes life, so much easier with websites.

Though if you decide not to, the code I gave.. might need some changes to allow images. What you gave isn't correct.

I'm not sure but you could try this..

Replace..

$result = /images("SELECT * FROM tblname");          ##  Is this correct if I want it to read from images directory?
$numrows = mysql_num_rows($result);

With this..

$dir = 'path_to_images_directory';
$result = opendir($dir);
$numrows = 0;
while(($f = readdir($result)) !== false)
  if(ereg('.jpg$', $f))
     ++$numrows;

As for this line

$result = /Images("SELECT * FROM tblname DESC LIMIT $offset, $rowsperpage") or trigger_error('Query failed: '. mysql_error());

I'm not sure what it'll be. Someone else may need to help you. I'm sorry. Now you may find out that having a database is so much easier.

yujikaido · April 5, 2010

Hey thanks again I really appreciate the help and the code. I have been adding a few things to it and I keep getting parse error. Yeah I am running xampplite for osx. Any other suggestions? I have also attached my css script.


<html>
<head>

<link rel="stylesheet" type="text/css" title="styles" href="style.css" />

</head>

<body>
<div id="container">
<h1>East Asian Neighborhood</h1>
<?php
$dir = 'images';
$result = opendir($dir);
$numrows = 0;
while(($f = readdir($result)) !== false)
  if(ereg('.jpg$', $f))
     ++$numrows;

$rowsperpage = 10; //How many get displayed per page
$totalpages = ceil($numrows / $rowsperpage); //Estimating the total of pages

//Getting the current page...
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
   $currentpage = (int) $_GET['page'];
} else {
//Could not retreive current page, so set it as 1
   $currentpage = 1;
}

//Checking if the current page is bigger than the total pages
if ($currentpage > $totalpages) {
//The current page is bigger, so display the results displayed on the last page.
   $currentpage = $totalpages;
}
//Checking if the current page is smaller than 1
if ($currentpage < 1) {
//The current page is smaller, so display the results dislpayed on the first page.
   $currentpage = 1;
}

$offset = ($currentpage - 1) * $rowsperpage; //Not sure about this, so dont change it
//Just change the query bit, do not change past "DESC LIMIT $offset, $rowsperpage" It IS needed.
$result =  opendir($dir)("SELECT * FROM tblname DESC LIMIT $offset, $rowsperpage") ;

//Displaying the results in an loop.
while ($list =  opendir($dir)($result)) {
      echo "Images get displayed here.";
  echo "EG:";
  echo "<img src=\"".$list['image']."\" border=\"0\" />";
}
echo 'Pages: '; //Echo the word Pages

$range = 3; //Page range on display. range 3, will display '1,2,3' or '2,3,4' for example

//if current page is bigger than 1...
if ($currentpage > 1) {
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back 1 page
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$prevpage'><</a> ";
}
else
{
   //display << to navigate to first page
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><<</a> ";
   //Display < to go back to the first page as you dont need to go back to prev page as you aren't past page 1.
   $prevpage = $currentpage - 1;
   echo " <a href='{$_SERVER['PHP_SELF']}?page=1'><</a> ";
}

//This little function echo's the page numbers etc at the bottom.
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
   if (($x > 0) && ($x <= $totalpages)) {
      if ($x == $currentpage) {
         echo " [<b>$x</b>] ";
      } else {
         echo " <a href='{$_SERVER['PHP_SELF']}?page=$x'>$x</a> ";
      }
   } 
}

//If the current page isn't the maximum number of pages 
if ($currentpage != $totalpages) {
   $nextpage = $currentpage + 1;
   //Display > to go to next page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$nextpage'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}
else
{
//Display > to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>></a> ";
   //Display >> to go to last page.
   echo " <a href='{$_SERVER['PHP_SELF']}?page=$totalpages'>>></a> <br /><br /><br />";
}

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

Here is my style.css file

[css]

a, a:visited, a:hover {}

#container {position:relative; width:600px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}

#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;}

#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}

#container a.pics:hover img.thumb {border:1px solid #fff;}

#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;}

#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}

#container a.pics:focus img.thumb {border:1px solid #fc0}

#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}

#container span.info a {color:#000;}

#container span.info a:hover {text-decoration:none;}

[/css]

yujikaido · April 5, 2010

Oh also It maybe easier with databases but I am not allowed to use a database.

TeddyKiller · April 5, 2010

Oh also It maybe easier with databases but I am not allowed to use a database.

Is this homework you need help with?!

yujikaido · April 5, 2010

yeah its for an assignment. :-\ I am trying to pass the class but I am not doing to tell well. I just have hard time understanding it. I have been watching the videos on lynda.com though.

Sign In

PHP/CSS Photo gallery help needed

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information