Scripts
Ajax fotoalbum
Een simpel fotoalbum waarin alle plaatjes ge-preload worden en weergeven worden mbv ajax.
ajax-fotoalbum
index.php
[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" xml:lang="nl" lang="nl">
<head>
<title> Fotoalbum </title>
<style type="text/css">
BODY, HTML {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial;
background: white;
font-size: 12px;
}
#preload {
display: none;
}
#maindiv, #mainframe, #mainframe TR, #mainframe TR TD {
width: 100%;
height: 100%;
}
#show {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.dir {
display: block;
margin: 1px;
border: 2px solid black;
border-width: 0 0 0 2px;
background: #eee;
padding: 2px;
font-size: 16px;
text-decoration: none;
color: black;
padding-left: 5px;
}
.dir:hover {
background: #c0c0c0;
}
.file {
display: block;
font-size: 14px;
text-decoration: none;
color: black;
background: #eee;
margin: 1px;
padding: 2px;
}
.file IMG {
border: none;
height: 12px;
width: 12px;
}
.file:hover {
background: #c0c0c0;
}
#big {
border: 1px solid black;
}
#stats {
border: 1px solid #c0c0c0;
border-width: 1px 0 0 0;
}
LABEL {
float: left;
display: block;
width: 150px;
}
#javascript {
color: #c0c0c0;
}
INPUT {
font-family: Arial;
font-size: 12px;
}
</style>
<script type="text/javascript">
function showLoading() {
getId('body').align = 'center';
getId('body').innerHTML = 'Even aan het laden... <br /> <img src="loading.gif" alt="" />';
}
function createAjaxObject() {
object = false;
try {
object = new XMLHttpRequest();
}
catch(e) {
try {
object = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
object = new ActiveXObject('Microsoft.XMLHTTP');
}
}
return object;
}
function checkState(object) {
if (object.readyState == 4) {
return true;
} else {
return false;
}
}
function getId(id) {
return document.getElementById(id);
}
window.onload = function() {
<?php
if (!isset($_GET['link'])) {
?>
request = createAjaxObject();
request.onreadystatechange = function() {
if (checkState(request)) {
getId('body').innerHTML = request.responseText;
getId('body').align = 'left';
}
}
request.open('GET', 'getLevel.php?level=&'+Math.random(), true);
request.send(null);
<?php
} else {
?>
request = createAjaxObject();
request.onreadystatechange = function() {
if (checkState(request)) {
getId('body').innerHTML = request.responseText;
getId('body').align = 'left';
}
}
request.open('GET', 'showPic.php?pic=<?php echo htmlentities(strip_tags($_GET['link'])); ?>&'+Math.random(), true);
request.send(null);
<?php
}
?>
}
function loadLevel(level) {
showLoading();
request = createAjaxObject();
request.onreadystatechange = function() {
if (checkState(request)) {
getId('body').innerHTML = request.responseText;
getId('body').align = 'left';
}
}
request.open('GET', 'getLevel.php?level='+level+'&'+Math.random(), true);
request.send(null);
}
function loadPic(pic) {
showLoading();
request = createAjaxObject();
request.onreadystatechange = function() {
if (checkState(request)) {
getId('body').innerHTML = request.responseText;
getId('body').align = 'left';
}
}
request.open('GET', 'showPic.php?pic='+pic+'&'+Math.random(), true);
request.send(null);
}
</script>
</head>
<body>
<div id="maindiv">
<table id="mainframe"> <tr> <td valign="middle" align="center" id="body">
<div id="javascript">Javascript is vereist om dit fotoalbum te kunnen bekijken.</div>
Het fotoalbum is aan het laden, een moment geduld a.u.b. <br /> <img src="loading.gif" alt="" />
</td> </tr> </table>
</div>
<div id="preload">
<?php
function preloader($map = 'pictures') {
foreach (glob($map.'/*') as $file) {
if (is_dir($file))
preloader($file);
else
echo '<img src="'.$file.'" alt="" />';
}
}
preloader();
?>
</div>
</body>
</html>
[/code]
getLevel.php
[code]
<?php
if (ereg('(..|http)',$_GET['level']) && (!ereg('^pictures',$_GET['level']) && !empty($_GET['level']))) exit('<div id="show">Er is een fout opgetreden.</div>');
?>
<div id="show">
<?php
function removeExtention($var) {
$var = explode('.', $var);
return $var[0];
}
$lvl = $_GET['level'];
$dirs = array();
$pics = array();
if (empty($lvl) || $lvl == 'pictures') {
foreach (glob('pictures/*') as $file) {
if (is_dir($file))
$dirs[] = $file;
elseif (ereg('(.jpg|.jpeg|.png|.gif)$', strtolower($file)))
$pics[] = $file;
}
if (!empty($dirs)) {
foreach($dirs as $file) {
echo '<a href="#" onClick="javascript: loadLevel(\''.$file.'\');" class="dir">'.basename($file).'</a>';
}
echo '<br />';
}
if (!empty($pics)) {
foreach ($pics as $file) {
echo '<a href="#" onClick="javascript: loadPic(\''.$file.'\');" class="file"> <img src="'.$file.'" alt="" /> '.basename(removeExtention($file)).'</a>';
}
} else {
echo 'Er zijn geen foto\'s.';
}
} else {
echo '<a href="#" onClick="javascript: loadLevel(\''.str_replace('/'.basename($file),'',$file).'\');" class="dir">Terug</a><br />';
foreach (glob($lvl.'/*') as $file) {
if (is_dir($file))
$dirs[] = $file;
elseif (ereg('(.jpg|.jpeg|.png|.gif)$', strtolower($file)))
$pics[] = $file;
}
if (!empty($dirs)) {
foreach($dirs as $file) {
echo '<a href="#" onClick="javascript: loadLevel(\''.$file.'\');" class="dir">'.basename($file).'</a>';
}
echo '<br />';
}
if (!empty($pics)) {
foreach ($pics as $file) {
echo '<a href="#" onClick="javascript: loadPic(\''.$file.'\');" class="file"> <img src="'.$file.'" alt="" /> '.basename(removeExtention($file)).'</a>';
}
} else {
echo 'Er zijn geen foto\'s.';
}
}
?>
</div>
[/code]
showPic.php
[code]
<?php
if (ereg('(..|http)',$_GET['pic']) && (!ereg('^pictures',$_GET['pic']) && !empty($_GET['pic'])) || empty($_GET['pic'])) exit('<div id="show">Er is een fout opgetreden.</div>');
?>
<div id="show">
<?php
function removeExtention($var) {
$var = explode('.', $var);
return $var[0];
}
$pic = $_GET['pic'];
$dirs = array();
$pics = array();
echo '<a href="#" onClick="javascript: loadLevel(\''.str_replace('/'.basename($pic),'',$pic).'\');" class="dir">Terug</a><br />';
$afmetingen = getimagesize($pic);
if ($afmetingen[0] > 300)
$add = ' width="300px"';
else
$add = '';
echo '<img id="big" src="'.$pic.'"'.$add.' id="image"/>';
echo '<br><br><div id="stats">';
echo '<label>Bestandsnaam:</label>'.basename($pic).'<br>';
echo '<label>Grootte:</label>'.round(filesize($pic)/1024/1024, 1).'MB ('.round(filesize($pic)/1024).'KB)<br>';
echo '<label>Afmetingen:</label>'.$afmetingen[0].'x'.$afmetingen[1].'<br>';
echo '<br>Link:<br><input onClick="this.select();" size="30" value="http://'.$_SERVER['SERVER_NAME'].'/index.php?link='.$pic.'" /><br>';
echo '</div>';
?>
</div>
[/code]
loading.gif
[img]http://www.tottenhamhotspur.com/images/loading.gif[/img]
Reacties
0