Проста галерия

Автор: peter_ew

Здравейте,
Ще ви представя една проста галерия, която написах през свободното си време.
Екстри:
-Снимките/картинките могат да се сменят със стрелките за наляво и надясно.
-Може да се добавят нови стилове. За това ще спомена после.

Файлове:

index.php
config.php
style/blue.css

index.php

<?php
include("config.php");
?>
<html>
<head>
<title>Галерията на <?php echo $title; ?></title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="style/<?php echo $style; ?>.css" />
<script type="text/javascript">
var links=new Array();
var width=new Array();
var height=new Array();
<?php
include("config.php");
$dir=opendir("$directory");
$i=0;
while($file=readdir($dir)) {
$ext=strtolower(end(explode(".",$file)));
if($ext=="png" || $ext=="gif" || $ext=="jpeg" || $ext=="jpg") {
list($width,$height,$type,$attr)=getimagesize("$directory$file");
echo "links[$i]=\"$directory$file\";\n";
echo "width[$i]=$width;\n";
echo "height[$i]=$height;\n";
$i++;
}
}
closedir($dir);
?>
function $(div) {
return document.getElementById(div);
}
function loadImage() {
while(width[0]>screen.width-200 || height[0]>screen/height-200) {width[0]/=2; height[0]/=2;}
$('image').src=links[0];
$('image').style.left=screen.width/2-width[0]/2;
$('image').style.top=screen.height/2-height[0]/2-50;
$('image').style.width=width[0];
$('image').style.height=height[0];
}
var curr=0;
function next() {
if(curr==links.length-1) return;
curr++;
while(width[curr]>screen.width-200 || height[curr]>screen/height-200) {width[curr]/=2; height[curr]/=2;}
$('image').src=links[curr];
$('image').style.left=screen.width/2-width[curr]/2;
$('image').style.top=screen.height/2-height[curr]/2-50;
$('image').style.width=width[curr];
$('image').style.height=height[curr];
}
function previous() {
if(curr==0) return;
curr--;
while(width[curr]>screen.width-200 || height[curr]>screen/height-200) {width[curr]/=2; height[curr]/=2;}
$('image').src=links[curr];
$('image').style.left=screen.width/2-width[curr]/2;
$('image').style.top=screen.height/2-height[curr]/2-50;
$('image').style.width=width[curr];
$('image').style.height=height[curr];
}
function key() {
var keyid=event.keyCode;
if(keyid==37) {previous(); $('prevlink').style.color="#ffffff";}
if(keyid==39) {next(); $('nextlink').style.color="#ffffff";}
}
function key1() {
var keyid=event.keyCode;
if(keyid==37) $('prevlink').style.color="#00ffff";
if(keyid==39) $('nextlink').style.color="#00ffff";
}
</script>
</head>
<body onload="loadImage();" onkeydown="key1();" onkeyup="key();">
<div id="title">TechnoForce Simple Gallery</div>
<img id="image" alt="Image" />
<div id="links"><a href="javascript:void(0);" onclick="previous();" id="prevlink"><<</a> <a href="javascript:void(0);" onclick="next();" id="nextlink">>></a></div>
</body>
</html>

config.php

<?php
$title=""; //заглавието на галерията
$style="blue"; //това е стилът. Оставете го така. За него ще спомена по надолу.
$directory="./pictures/"; //директорията, от която да вади снимките. Задължително с ./ преди директорията
?>

style/blue.css

#title {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
background: #0000ff;
color: #000000;
}
#image {
position: absolute;
left: 45%;
top: 45%;
}
#links {
position: absolute;
left: 0px;
bottom: 0px;
text-align: center;
width: 100%;
font-size: 35px;
background: #0000ff;
color: #ffffff;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #00ffff;
}
a:visited:hover {
color: #00ffff;
}
img {
border: 0;
}

За промяната на стила
1.Вземете кода на blue.css
2.Запишете го под друго име. Например green.css
3.Във config.php заменете blue със името – в нашия случай green
4.Направете си стила по ваш вкус.
5.Вече сте готови. Имате нов стил.

Съжалявам, но ДЕМО не мога да дам в момента.

Урока е авторски и забранявам преписването му в други сайтове без моето или съгласието на администратора.