login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > PHP > Foto gallerijen > aanpasbare image gallery (popup, opacity en meer)

aanpasbare image gallery (popup, opacity en meer)

Auteur: olminator - 15 augustus 2008 - 16:02 - Gekeurd door: Gerard - Hits: 13292 - 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
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Gallery</title>
  5. <?php
  6. include("config.php");
  7. include("functions.php");
  8. ?>
  9. <script type="text/javascript">
  10. <!--
  11. function pictureChange(mylink){
  12. if (! window.focus)return true;
  13. var href
  14. if (typeof(mylink) == 'string')
  15. href = mylink
  16. else
  17. href = mylink.href
  18. 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>'
  19. return false
  20. }
  21. //-->
  22. </script>
  23.  
  24. <script type="text/javascript">
  25. <!--
  26. function newPopup(mylink, windowname)
  27. {
  28. if (! window.focus)return true;
  29. var href;
  30. if (typeof(mylink) == 'string')
  31. href = mylink;
  32. else
  33. href = mylink.href;
  34. href = "picture.php?pic=" + href;
  35. window.open(href, windowname, 'width=1600px, height=1200px, scrollbars=yes, resize=yes, statusbar=yes, menubar=yes');
  36. return false;
  37. }
  38. //-->
  39. </script>
  40. <style type="text/css">
  41. body {
  42. background-color: #333333;
  43. }
  44.  
  45. table {
  46. padding: 2px;
  47. }
  48.  
  49. table tr td.border {
  50. border: 2px solid #393939;
  51. }
  52.  
  53. img {
  54. border: 3px solid #393939;
  55. }
  56.  
  57. #plaatje {
  58. background-color: #444444;
  59. }
  60.  
  61. #img {
  62. max-width: <?php echo $maxWidth; ?>;
  63. max-height: <?php echo $maxHeight; ?>;
  64. }
  65.  
  66. #table {
  67. background-color: #444444;
  68. }
  69. </style>
  70. </head>
  71.  
  72. <body>
  73. <?php
  74. //dont edit below
  75. $firstPic = htmlentities($path . "0" . $low . $types[0]);
  76. ?>
  77. <center>
  78. <div id="plaatje" style="height: 550px;">
  79. <table style="height: 100%; border: 0;">
  80. <tr valign="middle">
  81. <td><a href="<?php echo $firstPic; ?>" onclick="return newPopup('<?php echo $firstPic; ?>', 'Gallery')"><img src="<?php echo $firstPic; ?>" alt="" id="img" /></a></td>
  82. </tr>
  83. </table>
  84. </div>
  85. <br /><br />
  86. <div id="table">
  87. <table cellspacing="1" cellpadding="2">
  88. <tr align="center">
  89. <?php
  90. for ($number = $low; $number <= $high; $number++)
  91. {
  92. 	if ($zero == 1)
  93. 	{
  94. 	//make sure numbers below 10 are written with a "0"
  95. 		if ($number <=9)
  96. 		{
  97. 			$number = "0" . $number;
  98. 		}
  99. 	}
  100. 	//the full picture name
  101. 	$type = checkPicExists($path . $number, $types);
  102. 	$picture = $path . $number . $type;
  103. 	$size = getimagesize($picture);
  104. 	if ($size[0] >= $size[1])
  105. 	{
  106. 		$grootte = 'width="160"';
  107. 	}
  108. 	else
  109. 	{
  110. 		$grootte = 'height="160"';
  111. 	}
  112. 	$picture = htmlentities($picture);
  113. ?>
  114. <td width="180" height="180" class="border">
  115. <a href="<?php echo $picture; ?>" onclick="return pictureChange(this)">
  116. <img src="<?php echo $picture; ?>" alt="" <?php echo $grootte; ?> 
  117. onmouseover="this.style.opacity = '<?php echo $opacityOver; ?>'; this.filters.alpha.opacity = '<?php echo $opacityOver*100; ?>'" 
  118. onmouseout="this.style.opacity = '<?php echo $opacityOut; ?>'; this.filters.alpha.opacity = '<?php echo $opacityOut*100; ?>'" 
  119. style="filter: alpha(opacity='<?php echo $opacityOut*100; ?>'); opacity: <?php echo $opacityOut; ?>;" />
  120. </a>
  121. </td>
  122. <?php
  123. 	//after every n pictures, a new row or column will begin
  124. 	if ($display == 1)
  125. 	{
  126. 		if ($number%ceil($high/$rows)==0)
  127. 		{
  128. 			if ($number != $high)
  129. 			{
  130. 				?>
  131. 				</tr>
  132.                 <tr align="center">
  133.                 <?php
  134. 			}
  135. 		}
  136. 	}
  137. 	else
  138. 	{
  139. 		if ($number%$columns == 0)
  140. 		{
  141. 			if ($number!=$high)
  142. 			{
  143. 				?>
  144. 				</tr>
  145.                 <tr align="center">
  146.                 <?php
  147. 			}
  148. 		}
  149. 	}
  150. }
  151. ?>
  152. </tr>
  153. </table>
  154. </div>
  155. </center>
  156.  
  157. </body>
  158. </html>


hier de pagina met alle configuraties erin, sla op als config.php:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. //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
  3. $path = 'images/ch';
  4.  
  5. //the lowest and highest number behind the pictures
  6. $low = 1;
  7. $high = 37;
  8.  
  9. //number of rows OR columns (you can't use them both)
  10. $rows = 4;
  11. $columns = 10;
  12.  
  13. //set if you want to display rows or columns (1 means rows, anything else means columns will be set)
  14. $display = 0;
  15.  
  16. //a zero before the picture number if the number is below 10? (1 means yes, anything else means no)
  17. $zero = 1;
  18.  
  19. //an array that contains all the extensions you use
  20. $types = array('.png', '.gif', '.jpg');
  21.  
  22. //opacity on rollover and on rollout (between 0 and 1, higher means better visible)
  23. $opacityOver = 1;
  24. $opacityOut = .7;
  25.  
  26. //max-width & max-height of the enlarged picture
  27. $maxWidth = "500px";
  28. $maxHeight = "500px";
  29. ?>


maak deze pagina aan onder de naam picture.php:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Picture</title>
  5. <style type="text/css">
  6. body {
  7. background-color: #333333;
  8. }
  9.  
  10. img {
  11. border: 3px solid #393939;
  12. margin: 15px;
  13. }
  14.  
  15. #plaatje {
  16. background-color: #444444;
  17. }
  18.  
  19. .butt {
  20. color: #999999;
  21. background-color: #444444;
  22. font-family: Arial;
  23. font-weight: bold;
  24. border: 1px solid #999999;
  25. }
  26.  
  27. .butt:hover {
  28. background-color: #373737;
  29. }
  30. </style>
  31. </head>
  32.  
  33. <body>
  34. <?php
  35. include("config.php");
  36. include("functions.php");
  37. function prevImg($num)
  38. {
  39. $number = $num-1;
  40. if ($number <= 9)
  41. {
  42. $number = "0" . $number;
  43. }
  44. return $number;
  45. }
  46.  
  47. function nextImg($num)
  48. {
  49. $number = $num+1;
  50. if ($number <= 9)
  51. {
  52. $number = "0" . $number;
  53. }
  54. return $number;
  55. }
  56. ?>
  57. <center>
  58. <br />
  59. <div id="plaatje">
  60. <?php
  61. $pic = $_GET['pic'];
  62. echo "<img src=\"" . $pic . "\" alt=\"Click to close this window\" onclick=\"window.close()\" />";
  63. ?>
  64. </div>
  65. <br /><br />
  66. <form action="#">
  67. <table>
  68. <tr>
  69. <td width="200" align="center">
  70. <?php
  71. $length = strlen($pic);
  72. $type = getExt($pic);
  73. $prevType = checkPrevExt($path, $pic, $types, $zero);
  74. $nextType = checkNextExt($path, $pic, $types, $zero);
  75. $number = substr($pic, $length - strlen($type) - 2, 2);
  76. if ($number != "0" . $low)
  77. {
  78. echo '<input type="button" class="butt" onclick="window.location = \'picture.php?pic=' . $path . prevImg($number) . $prevType . '\'" value="<<" />';
  79. }
  80. ?>
  81. </td>
  82. <td width="200" align="center"><input type="button" class="butt" onclick="window.close()" value="Close window!" /></td>
  83. <td width="200" align="center">
  84. <?php
  85. if ($number != $high)
  86. {
  87. echo '<input type="button" class="butt" onclick="window.location = \'picture.php?pic=' . $path . nextImg($number) . $nextType . '\'" value=">>" />';
  88. }
  89. ?>
  90. </td>
  91. </tr>
  92. </table>
  93. </form>
  94. </center>
  95. </body>
  96. </html>


en maak ten slotte deze pagina aan als functions.php
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?php
  2. function checkPicExists($path, $types)
  3. {
  4. 	$ext = "";
  5. 	for ($i = 0; $i < count($types); $i++)
  6. 	{
  7. 		$file = $path . $types[$i];
  8. 		if (file_exists($file))
  9. 		{
  10. 			$ext = $types[$i];
  11. 			return $ext;
  12. 		}
  13. 	}
  14. 	if ($ext == "")
  15. 	{
  16. 		$ext = '.png';
  17. 	}
  18. 	return $ext;
  19. }
  20.  
  21. function getExt($pic)
  22. {
  23. 	$picArr = explode(".", $pic);
  24. 	$ext = $picArr[count($picArr)-1];
  25. 	$ext = "." . $ext;
  26. 	return $ext;
  27. }
  28.  
  29. function checkNextExt($path, $pic, $types, $zero = 1)
  30. {
  31. 	$ext = "";
  32. 	$numbers = "";
  33. 	$picArr = str_split($pic);
  34. 	for($i = 0; $i < count($picArr); $i++)
  35. 	{
  36. 		if (is_numeric($picArr[$i]))
  37. 		{
  38. 			$numbers = $numbers . $pic[$i];
  39. 		}
  40. 	}
  41. 	$number = $numbers + 1;
  42. 	if ($number <= 9)
  43. 	{
  44. 		$number = "0" . $number;
  45. 	}
  46. 	for ($i = 0; $i < count($types); $i++)
  47. 	{
  48. 		if (file_exists($path . $number . $types[$i]))
  49. 		{
  50. 			$ext = $types[$i];
  51. 			return $ext;
  52. 		}
  53. 	}
  54. }
  55.  
  56. function checkPrevExt($path, $pic, $types, $zero = 1)
  57. {
  58. 	$ext = "";
  59. 	$numbers = "";
  60. 	$picArr = str_split($pic);
  61. 	for($i = 0; $i < count($picArr); $i++)
  62. 	{
  63. 		if (is_numeric($picArr[$i]))
  64. 		{
  65. 			$numbers = $numbers . $pic[$i];
  66. 		}
  67. 	}
  68. 	$number = $numbers - 1;
  69. 	if ($number <= 9)
  70. 	{
  71. 		$number = "0" . $number;
  72. 	}
  73. 	for ($i = 0; $i < count($types); $i++)
  74. 	{
  75. 		if (file_exists($path . $number . $types[$i]))
  76. 		{
  77. 			$ext = $types[$i];
  78. 			return $ext;
  79. 		}
  80. 	}
  81. }
  82. ?>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (6)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.069s