Jag måste nog be om ursäkt för att jag inte berättat allt som ingår i detta lilla projekt, och som nog lett dig fel tyvärr.
Det finns tre filer totalt:
viewer.php - som håller ihop alltsammans
paging.php - som skapar funktionerna för sidhanteringen
paging.html - som bara har själva utskriften av länkarna till sidorna.
Jag är ju inte så kunnig själv så det mesta är sådant jag hittat på olika platser och "knypplat ihop" efter bästa förmåga. Detta brukar jag lösa och det ligger utöver detta en databas klar och väntar på att få tillträde till filerna.
Med risk för att smutsa ner så kommer filerna här:
viewer.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
//Jeff
//www.huntingground.freeserve.co.uk
ig1cArr=[
['test_images/01.jpg','Image 1','This area shows any text that goes with the image.'],
['test_images/02.jpg','Image 2','A default style can be set for this text box and its contents','textstyle2'],
['test_images/03.jpg','Image 3','You can also over-ride the default style and create individual text box styles','textstyle3'],
['test_images/04.jpg','Image 4','You can show just the image by leaving the appropriate array index empty','textstyle4'],
['test_images/05.jpg','Image 5',''],
['test_images/06.jpg','Image 6',''] // no comma at the end of the last line
]
preload=new Array()
for(var i=0;i<ig1cArr.length;i++){
preload[i]=new Image()
preload[i].src=ig1cArr[i][0]
}
function showIG1cPic(num){
document.images["pic"].src=ig1cArr[num][0]
document.images["pic"].alt=ig1cArr[num][1]
document.getElementById("imgtxt").innerHTML=ig1cArr[num][2]
document.getElementById("imgtxt").style.width=preload[num].width+"px"
if(ig1cArr[num][3]){
document.getElementById("imgtxt").className=ig1cArr[num][3]
}
else if(ig1cArr[num][2]==""){
document.getElementById("imgtxt").className=""
}
else{
document.getElementById("imgtxt").className="defaultstyle"
}
}
// -->
</script>
<style type="text/css">
#container{
width: 475px;
position: relative;
padding-top: 55px;
padding-left: 30px;
padding-right: 0px;
}
#imgholder{
background: #0000ff;
width: 475px;
height: 365px;
position: absolute;
}
#imgtxt{
width: 475px;
height: 50px;
position: absolute;
margin-top: 365px;
text-align: center;
padding-top: 10px;
font-family : verdana, arial, helvetica;
color : #65734a;
text-decoration : none;
font-size : 12px;
}
#nav{
width: 475px;
height: 20px;
position: absolute;
margin-top: 442px;
}
#thumbs{
width: 475px;
height: 58px;
position: absolute;
margin-top: 420px;
margin-left: 40px;
}
#imghover a img {
filter: alpha(opacity=25);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
-moz-opacity: .25;
opacity:0.25;
}
#imghover a:hover img {
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.0;
opacity:1.0;
}
ul#navigation
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul#navigation li a
{
font-family : verdana, arial, helvetica;
color : #747474;
text-decoration : none;
font-size : 10px;
font-weight : bold;
text-align: center;
}
ul#navigation li a:hover
{
font-family : verdana, arial, helvetica;
color : #ffffff;
text-decoration : underline;
font-size : 10px;
font-weight : bold;
}
ul#navigation .left { float: left; }
ul#navigation .right { float: right; }
</style>
</head>
<body bgcolor="#000000">
<table border="0">
<tr>
<td width="560" height="590" background="../reservatet_hemma/images/background_right.jpg" valign="top">
<div id="container">
<?
$img_path = './test_images';
$thumb_path = './test_thumbs';
$images = array();
// Hämta bilderna till array
if ($handle = opendir($img_path)) {
while (false !== ($file = readdir($handle))) {
if ($file != "Thumbs.db" && $file != "." && $file != "..") {
$images[] = $file;
}
}
closedir($handle);
}
// Och så lite paging
include 'paging.php';
$limit = 5; // Bilder per sida
$items_num = count($images);
$paging = paging($items_num, $limit, 'paging.html');
$images = array_slice($images, $paging['offset'], $paging['limit']);
//echo $paging['output'];
// Slut paging
?>
<div id="imgholder"><img name="pic" id="pic" src="test_images/01.jpg" alt=""></div>
<div id="imgtxt"></div>
<div id="nav">
<? echo $paging['output']; ?>
</div>
<div id="thumbs">
<table border="0">
<?
// Loopa igenom mappen efter bilder
$i = 0;
$nr = 0;
foreach ($images as $image){
echo ($i != 0 && $i % 5 == 0 ? " </tr>\n <tr>\n" : '')."
<td><div id=\"imghover\"><a href=\"#\"><img src=\"$thumb_path/$image\" border=\"0\" onclick=\"showIG1cPic(".$nr.")\" style=\"cursor:hand;\"></a></div></td>
";
$i++;
$nr++;
}
?>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
paging.php
<?
function paging ($items_num, $limit, $tpl, $page_name='page') {
$pages_num = ceil($items_num / $limit);
$page = isset($_GET[$page_name]) ? intval($_GET[$page_name]) : 1;
$page = $page > $pages_num ? $pages_num : $page;
$page = $page < 1 ? 1 : $page;
$paglink = array();
for ($i=0; $i<$pages_num; $i++) {
$offset = $i * $limit + 1;
$stopp = $i < $pages_num - 1 ? $offset + $limit-1 : $items_num;
$paglink[$i+1] = array('start'=>$offset, 'stop'=>$stopp);
if ($page == $i + 1) {
$start = $offset;
$end = $stopp;
}
}
$offset = ($page - 1) * $limit;
$paging = array('output'=>'', 'offset'=>$offset, 'limit'=>$limit, 'page'=>$page);
if ($pages_num > 1) {
$paging_tpl = file_get_contents($tpl);
preg_match("/{pag_link}(.*?){\/pag_link}/is", $paging_tpl, $match);
$paglink_tpl = $match[1];
for ($i=1; $i<=count($paglink); $i++) {
$_GET[$page_name] = $i;
$paging['output'] .= sprintf($paglink_tpl, $_SERVER['PHP_SELF'], http_build_query($_GET), $paglink[$i]['start'], $paglink[$i]['stop']);
}
$search = array('{start}', '{end}', '{items_num}');
$replace = array($start, $end, $items_num);
$paging_tpl = str_replace($search, $replace, $paging_tpl);
$paging['output'] = preg_replace("/{pag_link}(.*?){\/pag_link}/is", $paging['output'], $paging_tpl);
}
return $paging;
}
/**************************************************
* För PHP4
* Tack till md2perpe
* http://www.phpportalen.net/viewtopic.php?t=36453
**************************************************/
if (!function_exists('http_build_query')) {
function http_build_query($array, $prefix='')
{
return __http_build_query($array, '%s', $prefix);
}
// Hjälpfunktion
function __http_build_query($array, $var_pattern, $prefix='')
{
$query = array();
foreach($array as $key => $value) {
if(is_numeric($key))
$key = $prefix . $key;
$key = urlencode($key);
$var = sprintf($var_pattern, $key);
if(is_array($value)) {
$query[] = __http_build_query($value, "{$var}[%s]");
}
else {
$value = urlencode($value);
$query[] = "$var=$value";
}
}
$query = implode('&', $query);
return $query;
}
}
?>
paging.html
<table width="475" height="20" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="475">
<!-- Visar {start} - {end} av {items_num}<br> -->
<ul id="navigation">
<li class="left">{pag_link}</li>
<a href="%s?%s">%d-%d</a>
<li class="right">{/pag_link}</li>
</ul>
</td>
</tr>
</table>
Lite mycket kod att visa kanske men eftersom jag eventuellt misslett dig så är det kanske lika bra att visa upp hela "byken" för allmän åskådan :-)
/webb
