How do I create a 'picture gallery' with pagination?
Question
I want my web page to look something like this: http://1x.com/photos/latest-additions/
I nearly mirrored it using only PHP (code found below). However, I decided I need to have a database after people from stackoverflow told me I need to, as it will be good in the long run. Anyways, so now I'm at a loss, learning MySQL. I want to make my page be very similar to that 1x page: with clickable pictures in a certain order (except I want to use a list instead of a table, for better web semantics), and pagination. Can somebody please tell how I can achieve this? I don't intend to be a programmer, I just want to know how to make that layout + pagination :[
Can somebody please help? (by giving me a script, or tell me exactly what to do)
Oh, and
This was my original code. You can skip this, it's not necessary.
<?php
$rows_per_page = 2;
$cols_per_page = 2;
$image_href = '<a href=/';
$image_links = array('comics/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>', 'otherstuff/randy>');
$img_srcs = '<img src="https://s3.amazonaws.com/imagetitle/';
$images = array();
for($i = 1; $i < 10; $i++)
{
$images[$i] = $i;
}
$image_ending = '.png" height="200" width="200" /></a>';
$image_break = '<br /><div class="timeago"><div id="submitted">submitted </div>';
$image_descriptions = array('<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>', '<abbr class="timeago" title="2011-03-13T07:24:17Z"></abbr></div>');
$total_images = count($images);
$images_per_page = $rows_per_page * $cols_per_page;
$total_images = count($images);
$total_pages = ceil($total_images / $images_per_page);
$current_page = (int) $_GET['page'];
if($current_page<1 || $current_page>$total_pages)
{
$current_page = 1;
}
//Get records for the current page
$page_image_links = array_splice($image_links, ($current_page-1)*$images_per_page, $images_per_page);
$page_images = array_splice($images, ($current_page-1)*$images_per_page, $images_per_page);
$page_image_descriptions = array_splice($image_descriptions, ($current_page-1)*$images_per_page, $images_per_page);
$slots = "<table border=\"0\">";
for($row=0; $row<$rows_per_page; $row++)
{
$slots .= "<tr>";
for($col=0; $col<$cols_per_page; $col++)
{
$imgIdx = ($row * $rows_per_page) + $col;
$img = (isset($page_images[$imgIdx])) ? "{$image_href}{$page_image_links[$imgIdx]}{$img_srcs}{$page_images[$imgIdx]}{$image_ending}{$image_break}{$page_image_descriptions[$imgIdx]}" : ' ';
$slots .= "<td class='tables'>$img</td>";
}
$slots .= "</tr>";
}
$slots .= "</table>";
//Create pagination links
$first = "First";
$prev = "Prev";
$next = "Next";
$last = "Last";
if($current_page>1)
{
$prevPage = $current_page - 1;
$first = "<a href=\"w4rmoemfdoiemroifmeromfxdnxvl.php?page=1\">First</a>";
$prev = "<a href=\"w4rmoemfdoiemroifmeromfxdnxvl.php?page={$prevPage}\">Prev</a>";
}
if($current_page<$total_pages)
{
$nextPage = $current_page + 1;
$next = "<a href=\"w4rmoemfdoiemroifmeromfxdnxvl.php?page={$nextPage}\">Next</a>";
$last = "<a href=\"w4rmoemfdoiemroifmeromfxdnxvl.php?page={$total_pages}\">Last</a>";
}
?>
<html>
<title></title>
<head><style type="text/css">
#submitted {color: #888888; font-family:Verdana, Geneva, sans-serif; font-size: .8em; float:left;}
.tables {padding-left: 20px; padding-right: 20px;}
.timeago {color: #888888; font-family:Verdana, Geneva, sans-serif; font-size: .8em; float:right;}
</style><script src="/static/jquery-1.5.1.js" type="text/javascript"></script>
<script src="/static/jquery.timeago.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});</script></head>
<body>
<h2>Here are the records for page <?php echo $current_page; ?></h2>
<ul>
<?php echo $slots; ?>
</ul>
Page <?php echo $current_page; ?> of <?php echo $total_pages; ?>
<br />
<?php echo "view more: {$next}"; ?>
</body>
</html>
Thank you!
2 answers
solution1
1 2011-03-20 08:12:15
If you absolutely want to do this on your own which is plausible as it will allow you to learn something new, look for resources on:
1. connecting to a mysql database table from php
2. getting data from db into some variable
3. sending data from page to page using the querystring
4. post and get
for advanced stuff learn about sending asynchronous calls and AJAX
solution2
0 2011-03-19 23:05:41
For being not a programmer, why do you want to write code yourself (or even ask someone to write it for you)?
There are plenty of ready made gallery suites like Menalto Gallery , Coppermine Galler y and such.
Those consists of way more professional code than some sketch you can get from a volunteer on Stackoverflow.
Just download yourself one and play around. I am sure it will suit all your needs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.