aanpasbare image gallery (popup, opacity en meer)
Auteur: olminator - 15 augustus 2008 - 16:02 - Gekeurd door: Gerard - Hits: 13297 - Aantal punten: (0 stemmen)
Een script dat begon als gewone linkjes naar plaatjes die op een pagina getoond werden. groeide uit tot een iets groter script waaraan ik steeds meet functies heb toegevoegd. Het is mijn eerste script, commentaar/complimenten zou ik dus erg op prijs stellen
Een image gallery, gemaakt m.b.v. javascript en php, waarbij er bovenaan een groot plaatje getoond wordt (maxwidth=550, maxheight=550) met daaronder een x aantal kleine plaatjes, met 50% opacity, en als je daaroverheen gaat met de muis, wordt de opacity 100%. Als je op deze kleine plaatjes klikt, worden ze vergroot naar het grote plaatje, zonder de pagina te moeten herladen, en als je op het grote plaatje klikt, verschijnt dit plaatje in een nieuw venster. In dit nieuwe venster zullen "close window", "volgende" en "vorige" buttons verschijnen, uiteraard zou je die aan kunnen passen in css.
-het aantal rijen met plaatjes is in te stellen & het aantal plaatjes per rij (je moet hier tussen kiezen)
-de kleuren zijn volledig en gemakkelijk aanpasbaar (via css)
-de opacity veranderen is nu ook gemakkelijk
-alle variabelen zijn aan te passen in config.php met daarbij uitleg
de installatie wijst zich wel, gewoon de path van de plaatjes veranderen, en de rest veranderen, en klaar ben je
je mag dit script overal voor gebruiken en aanpassen naar je eigen inzichten (credit en/of berichtje naar mij zou leuk zijn )
|
Code: |
maak deze pagina aan als index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gallery</title>
<?php
include("config.php");
include("functions.php");
?>
<script type="text/javascript">
<!--
function pictureChange(mylink){
if (! window.focus)return true;
var href
if (typeof(mylink) == 'string')
href = mylink
else
href = mylink.href
document.getElementById('plaatje').innerHTML = '<table style="height: 100%; border: 0;"><tr valign="middle"><td><a href="' + href + '" onclick="return newPopup(this, \'Gallery\')"><img src="' + href + '" alt="" id="img" /><\/a><\/td><\/tr><\/table>'
return false
}
//-->
</script>
<script type="text/javascript">
<!--
function newPopup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href = mylink;
else
href = mylink.href;
href = "picture.php?pic=" + href;
window.open(href, windowname, 'width=1600px, height=1200px, scrollbars=yes, resize=yes, statusbar=yes, menubar=yes');
return false;
}
//-->
</script>
<style type="text/css">
body {
background-color: #333333;
}
table {
padding: 2px;
}
table tr td.border {
border: 2px solid #393939;
}
img {
border: 3px solid #393939;
}
#plaatje {
background-color: #444444;
}
#img {
max-width: <?php echo $maxWidth; ?>;
max-height: <?php echo $maxHeight; ?>;
}
#table {
background-color: #444444;
}
</style>
</head>
<body>
<?php
//dont edit below
$firstPic = htmlentities($path . "0" . $low . $types[0]);
?>
<center>
<div id="plaatje" style="height: 550px;">
<table style="height: 100%; border: 0;">
<tr valign="middle">
<td><a href="<?php echo $firstPic; ?>" onclick="return newPopup('<?php echo $firstPic; ?>', 'Gallery')"><img src="<?php echo $firstPic; ?>" alt="" id="img" /></a></td>
</tr>
</table>
</div>
<br /><br />
<div id="table">
<table cellspacing="1" cellpadding="2">
<tr align="center">
<?php
for ($number = $low; $number <= $high; $number++)
{
if ($zero == 1)
{
//make sure numbers below 10 are written with a "0"
if ($number <=9)
{
$number = "0" . $number;
}
}
//the full picture name
$type = checkPicExists($path . $number, $types);
$picture = $path . $number . $type;
$size = getimagesize($picture);
if ($size[0] >= $size[1])
{
$grootte = 'width="160"';
}
else
{
$grootte = 'height="160"';
}
$picture = htmlentities($picture);
?>
<td width="180" height="180" class="border">
<a href="<?php echo $picture; ?>" onclick="return pictureChange(this)">
<img src="<?php echo $picture; ?>" alt="" <?php echo $grootte; ?>
onmouseover="this.style.opacity = '<?php echo $opacityOver; ?>'; this.filters.alpha.opacity = '<?php echo $opacityOver*100; ?>'"
onmouseout="this.style.opacity = '<?php echo $opacityOut; ?>'; this.filters.alpha.opacity = '<?php echo $opacityOut*100; ?>'"
style="filter: alpha(opacity='<?php echo $opacityOut*100; ?>'); opacity: <?php echo $opacityOut; ?>;" />
</a>
</td>
<?php
//after every n pictures, a new row or column will begin
if ($display == 1)
{
if ($number%ceil($high/$rows)==0)
{
if ($number != $high)
{
?>
</tr>
<tr align="center">
<?php
}
}
}
else
{
if ($number%$columns == 0)
{
if ($number!=$high)
{
?>
</tr>
<tr align="center">
<?php
}
}
}
}
?>
</tr>
</table>
</div>
</center>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Gallery</title> <?php include("config.php"); include("functions.php"); ?> <script type="text/javascript"> <!-- function pictureChange(mylink){ if (! window.focus)return true; var href if (typeof(mylink) == 'string') href = mylink else href = mylink.href document.getElementById('plaatje').innerHTML = '<table style="height: 100%; border: 0;"><tr valign="middle"><td><a href="' + href + '" onclick="return newPopup(this, \'Gallery\')"><img src="' + href + '" alt="" id="img" /><\/a><\/td><\/tr><\/table>' return false } //--> </script> <script type="text/javascript"> <!-- function newPopup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href = mylink; else href = mylink.href; href = "picture.php?pic=" + href; window.open(href, windowname, 'width=1600px, height=1200px, scrollbars=yes, resize=yes, statusbar=yes, menubar=yes'); return false; } //--> </script> <style type="text/css"> body { background-color: #333333; } table { padding: 2px; } table tr td.border { border: 2px solid #393939; } img { border: 3px solid #393939; } #plaatje { background-color: #444444; } #img { max-width: <?php echo $maxWidth; ?>; max-height: <?php echo $maxHeight; ?>; } #table { background-color: #444444; } </style> </head> <body> <?php //dont edit below ?> <center> <div id="plaatje" style="height: 550px;"> <table style="height: 100%; border: 0;"> <tr valign="middle"> <td><a href=" <?php echo $firstPic; ?>" onclick="return newPopup(' <?php echo $firstPic; ?>', 'Gallery')"><img src=" <?php echo $firstPic; ?>" alt="" id="img" /></a></td> </tr> </table> </div> <br /><br /> <div id="table"> <table cellspacing="1" cellpadding="2"> <tr align="center"> <?php for ($number = $low; $number <= $high; $number++) { if ($zero == 1) { //make sure numbers below 10 are written with a "0" if ($number <=9) { $number = "0" . $number; } } //the full picture name $type = checkPicExists($path . $number, $types); $picture = $path . $number . $type; if ($size[0] >= $size[1]) { $grootte = 'width="160"'; } else { $grootte = 'height="160"'; } ?> <td width="180" height="180" class="border"> <a href=" <?php echo $picture; ?>" onclick="return pictureChange(this)"> <img src=" <?php echo $picture; ?>" alt="" <?php echo $grootte; ?> onmouseover="this.style.opacity = ' <?php echo $opacityOver; ?>'; this.filters.alpha.opacity = ' <?php echo $opacityOver*100; ?>'" onmouseout="this.style.opacity = ' <?php echo $opacityOut; ?>'; this.filters.alpha.opacity = ' <?php echo $opacityOut*100; ?>'" style="filter: alpha(opacity=' <?php echo $opacityOut*100; ?>'); opacity: <?php echo $opacityOut; ?>;" /> </a> </td> <?php //after every n pictures, a new row or column will begin if ($display == 1) { if ($number%ceil($high/$rows)==0) { if ($number != $high) { ?> </tr> <tr align="center"> <?php } } } else { if ($number%$columns == 0) { if ($number!=$high) { ?> </tr> <tr align="center"> <?php } } } } ?> </tr> </table> </div> </center> </body> </html>
hier de pagina met alle configuraties erin, sla op als config.php:
<?php
//the file path without the picture numbers, which will be added to it later, don't use an '&', a '%' or a space, cannot contain numeric values, unless it is at the end, and is the same for all pictures
$path = 'images/ch';
//the lowest and highest number behind the pictures
$low = 1;
$high = 37;
//number of rows OR columns (you can't use them both)
$rows = 4;
$columns = 10;
//set if you want to display rows or columns (1 means rows, anything else means columns will be set)
$display = 0;
//a zero before the picture number if the number is below 10? (1 means yes, anything else means no)
$zero = 1;
//an array that contains all the extensions you use
$types = array('.png', '.gif', '.jpg');
//opacity on rollover and on rollout (between 0 and 1, higher means better visible)
$opacityOver = 1;
$opacityOut = .7;
//max-width & max-height of the enlarged picture
$maxWidth = "500px";
$maxHeight = "500px";
?>
<?php //the file path without the picture numbers, which will be added to it later, don't use an '&', a '%' or a space, cannot contain numeric values, unless it is at the end, and is the same for all pictures $path = 'images/ch'; //the lowest and highest number behind the pictures $low = 1; $high = 37; //number of rows OR columns (you can't use them both) $rows = 4; $columns = 10; //set if you want to display rows or columns (1 means rows, anything else means columns will be set) $display = 0; //a zero before the picture number if the number is below 10? (1 means yes, anything else means no) $zero = 1; //an array that contains all the extensions you use $types = array('.png', '.gif', '.jpg'); //opacity on rollover and on rollout (between 0 and 1, higher means better visible) $opacityOver = 1; $opacityOut = .7; //max-width & max-height of the enlarged picture $maxWidth = "500px"; $maxHeight = "500px"; ?>
maak deze pagina aan onder de naam picture.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Picture</title>
<style type="text/css">
body {
background-color: #333333;
}
img {
border: 3px solid #393939;
margin: 15px;
}
#plaatje {
background-color: #444444;
}
.butt {
color: #999999;
background-color: #444444;
font-family: Arial;
font-weight: bold;
border: 1px solid #999999;
}
.butt:hover {
background-color: #373737;
}
</style>
</head>
<body>
<?php
include("config.php");
include("functions.php");
function prevImg($num)
{
$number = $num-1;
if ($number <= 9)
{
$number = "0" . $number;
}
return $number;
}
function nextImg($num)
{
$number = $num+1;
if ($number <= 9)
{
$number = "0" . $number;
}
return $number;
}
?>
<center>
<br />
<div id="plaatje">
<?php
$pic = $_GET['pic'];
echo "<img src=\"" . $pic . "\" alt=\"Click to close this window\" onclick=\"window.close()\" />";
?>
</div>
<br /><br />
<form action="#">
<table>
<tr>
<td width="200" align="center">
<?php
$length = strlen($pic);
$type = getExt($pic);
$prevType = checkPrevExt($path, $pic, $types, $zero);
$nextType = checkNextExt($path, $pic, $types, $zero);
$number = substr($pic, $length - strlen($type) - 2, 2);
if ($number != "0" . $low)
{
echo '<input type="button" class="butt" onclick="window.location = \'picture.php?pic=' . $path . prevImg($number) . $prevType . '\'" value="<<" />';
}
?>
</td>
<td width="200" align="center"><input type="button" class="butt" onclick="window.close()" value="Close window!" /></td>
<td width="200" align="center">
<?php
if ($number != $high)
{
echo '<input type="button" class="butt" onclick="window.location = \'picture.php?pic=' . $path . nextImg($number) . $nextType . '\'" value=">>" />';
}
?>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Picture</title> <style type="text/css"> body { background-color: #333333; } img { border: 3px solid #393939; margin: 15px; } #plaatje { background-color: #444444; } .butt { color: #999999; background-color: #444444; font-family: Arial; font-weight: bold; border: 1px solid #999999; } .butt:hover { background-color: #373737; } </style> </head> <body> <?php include("config.php"); include("functions.php"); function prevImg($num) { $number = $num-1; if ($number <= 9) { $number = "0" . $number; } return $number; } function nextImg($num) { $number = $num+1; if ($number <= 9) { $number = "0" . $number; } return $number; } ?> <center> <br /> <div id="plaatje"> <?php $pic = $_GET['pic']; echo "<img src=\"" . $pic . "\" alt=\"Click to close this window\" onclick=\"window.close()\" />"; ?> </div> <br /><br /> <form action="#"> <table> <tr> <td width="200" align="center"> <?php $type = getExt($pic); $prevType = checkPrevExt($path, $pic, $types, $zero); $nextType = checkNextExt($path, $pic, $types, $zero); if ($number != "0" . $low) { echo '<input type="button" class="butt" onclick="window.location = \'picture .php?pic =' . $path . prevImg($number) . $prevType . '\ '" value="<<" />'; } ?> </td> <td width="200" align="center"><input type="button" class="butt" onclick="window.close()" value="Close window!" /></td> <td width="200" align="center"> <?php if ($number != $high) { echo '<input type="button" class="butt" onclick="window.location = \'picture .php?pic =' . $path . nextImg($number) . $nextType . '\ '" value=">>" />'; } ?> </td> </tr> </table> </form> </center> </body> </html>
en maak ten slotte deze pagina aan als functions.php
<?php
function checkPicExists($path, $types)
{
$ext = "";
for ($i = 0; $i < count($types); $i++)
{
$file = $path . $types[$i];
if (file_exists($file))
{
$ext = $types[$i];
return $ext;
}
}
if ($ext == "")
{
$ext = '.png';
}
return $ext;
}
function getExt($pic)
{
$picArr = explode(".", $pic);
$ext = $picArr[count($picArr)-1];
$ext = "." . $ext;
return $ext;
}
function checkNextExt($path, $pic, $types, $zero = 1)
{
$ext = "";
$numbers = "";
$picArr = str_split($pic);
for($i = 0; $i < count($picArr); $i++)
{
if (is_numeric($picArr[$i]))
{
$numbers = $numbers . $pic[$i];
}
}
$number = $numbers + 1;
if ($number <= 9)
{
$number = "0" . $number;
}
for ($i = 0; $i < count($types); $i++)
{
if (file_exists($path . $number . $types[$i]))
{
$ext = $types[$i];
return $ext;
}
}
}
function checkPrevExt($path, $pic, $types, $zero = 1)
{
$ext = "";
$numbers = "";
$picArr = str_split($pic);
for($i = 0; $i < count($picArr); $i++)
{
if (is_numeric($picArr[$i]))
{
$numbers = $numbers . $pic[$i];
}
}
$number = $numbers - 1;
if ($number <= 9)
{
$number = "0" . $number;
}
for ($i = 0; $i < count($types); $i++)
{
if (file_exists($path . $number . $types[$i]))
{
$ext = $types[$i];
return $ext;
}
}
}
?>
<?php function checkPicExists($path, $types) { $ext = ""; for ($i = 0; $i < count($types); $i++) { $file = $path . $types[$i]; { $ext = $types[$i]; return $ext; } } if ($ext == "") { $ext = '.png'; } return $ext; } function getExt($pic) { $ext = $picArr[count($picArr)-1]; $ext = "." . $ext; return $ext; } function checkNextExt($path, $pic, $types, $zero = 1) { $ext = ""; $numbers = ""; $picArr = str_split($pic); for($i = 0; $i < count($picArr); $i++) { { $numbers = $numbers . $pic[$i]; } } $number = $numbers + 1; if ($number <= 9) { $number = "0" . $number; } for ($i = 0; $i < count($types); $i++) { { $ext = $types[$i]; return $ext; } } } function checkPrevExt($path, $pic, $types, $zero = 1) { $ext = ""; $numbers = ""; $picArr = str_split($pic); for($i = 0; $i < count($picArr); $i++) { { $numbers = $numbers . $pic[$i]; } } $number = $numbers - 1; if ($number <= 9) { $number = "0" . $number; } for ($i = 0; $i < count($types); $i++) { { $ext = $types[$i]; return $ext; } } } ?>
Download code (.txt)
|
|
Stemmen |
Niet ingelogd. |
|