Galerie de photos super simple V.2

Un aperçu avec un dossier de fonds d'écran gnome ou ubuntu:

Dans index php, pour avoir des thumbnail plus petits, j'ai changé :

ResizeImage($liste_rep[$i],"thumbnails/".$liste_rep[$i], 100, 100);

par:

ResizeImage($liste_rep[$i],"thumbnails/".$liste_rep[$i], 50, 50);

Dans le billet précédent vous avez été nombreux[1] à me demander comment j'avais fait pour mettre mon caroussel super simple de photographes.

Ce n'est pas super joli, pas de fondu ou autre, mais je trouve ça simple et efficace. Il s'agit d'une petite amélioration de mon script publié ici il y a 11 mois.

La galerie sur le billet en lui même c'est une iframe:

  1. <div class="external-media" style="margin: 1em auto; text-align: center;">
  2. <iframe src="/galeries/android/" width="100%" height="730" frameborder="0"></iframe>
  3. </div>

Oui oui, je sais les iframes c'est mal. mais bien pratique, et je ne veux pas alourdir le <head> de ce site avec du javascript pour un billet seulement. Donc l'iframe c'est bien pratique.

Et ah heu oui, pour insérer du html en mode wiki, on fait comme ça dans un billet:

///html
<insérez votre code html là>
///

Maintenant, regardons ce que j'ai mis dans /galeries/android; la cible de l'iframe.

Quand je veux mettre des images, je les dépose tout simplement dans ce dossier (en ftp ou autre). Lors de la prochaine ouverture de la page il va détecter les images qui ont été ajoutées pour créer leurs miniatures qui sont dans le sous dossier thumbnails. (ça peut etre long).

un fichier ./index.php:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4.     <title>Yael</title>
  5. 	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  6. 	<meta name="COPYRIGHT" content="Site 2010 Blog du Grouik http://blog-du-grouik.tinad.fr Vous êtes libres de copier, redistribuer, de modifier le code source. Merci cependant d'y laisser la paternité si votre modification est nulle ou mineure. Juste pour ma gloire :p"/>
  7.  
  8.      <link rel="stylesheet" href="plop.css" type="text/css" />
  9. <script type="text/javascript">
  10. 	var x;
  11. 	var img;
  12.  
  13. 	function showimg(v)
  14. 	{
  15. 		document.getElementById("laphoto").alt = v;
  16. 		document.getElementById("laphoto").src = v;
  17.  
  18. 	}
  19.  
  20. 	function Init()	
  21. 	{
  22. 		img = document.getElementById(document.getElementById("laphoto").alt);
  23. 		x = window.setInterval('chgimg()', 4000);
  24.  
  25. 	}
  26. 	function chgimg()
  27. 	{
  28. 		img.style.borderStyle = "none";
  29. 		img=img.nextSibling;
  30. 		if (!img.nextSibling)
  31. 		{
  32. 			img=document.getElementById("listedephotos").firstChild;
  33. 		}
  34. 		while (img.nodeName != "IMG"){
  35. 			img=img.nextSibling;
  36. 		}
  37. 		showimg(img.id);
  38. 		img.style.borderStyle = "dashed";
  39. 	}
  40. 	function manualshowimg(v)
  41. 	{
  42. 		img.style.borderStyle = "none";
  43. 		img=document.getElementById(v);
  44. 		showimg(v);
  45. 		img.style.borderStyle = "dashed";
  46. 	}
  47.   	window.onload = Init;
  48.  
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body>
  54. <div class="all">
  55. 	<div id="listedephotos">
  56. <?php
  57. $liste_rep = scandir("./");
  58. include("thumbnails/thumbnails.php");
  59. $i = 0;
  60. $num = count($liste_rep);
  61. while($i < $num){
  62. 	if ((substr($liste_rep[$i],-4) == '.JPG')||(substr($liste_rep[$i],-4) == '.jpg')){
  63. 		if (!file_exists("thumbnails/".$liste_rep[$i])){
  64. 			//créer la miniature
  65. 			 ResizeImage($liste_rep[$i],"thumbnails/".$liste_rep[$i], 100, 100);
  66. 		}
  67.  
  68. 	echo "		<img onclick=\"manualshowimg('".$liste_rep[$i]."');\" src=\"thumbnails/".$liste_rep[$i]."\" id=\"".$liste_rep[$i]."\" alt=\"img\"/>\n";
  69.  
  70. 	}
  71.  	$i++;
  72. }
  73. ?>
  74. </div>
  75. <div>
  76. 	<img id="laphoto" src="<?php echo $liste_rep[3]; ?>" alt="<?php echo $liste_rep[3]; ?>" />
  77. </div>
  78. </div>
  79. </body>
  80. </html>

un fichier pour le css; ./plop.css:

  1. body {
  2. 	background: #fff; 
  3. 	color: #0F1415;
  4. 	font-size: 10px;
  5. 	font-family: Verdana, Arial;
  6. 	margin-bottom: 10px;
  7. }
  8.  
  9. #listedephotos{
  10. 	position absolute;
  11. 	top: 500px;
  12. 	width: 95%;
  13. }
  14. #laphoto{
  15. 	left: 5%;
  16. 	width: 95%;
  17. }
  18. #listedephotos img{
  19. 	cursor:  pointer;
  20. }

et un dossier thumbnails qui contient le fichier ./thumbnails/thumbnails.php suivant:

  1. <?php
  2. 	function ResizeImage($image, $newimage, $newwidth=0, $newheight=0) {
  3. 	// fonction récupérée là http://www.wikistuce.info/doku.php/php/miniatures_images
  4. 		if (!function_exists('ImageTypes'))
  5. 			return false;
  6. 		list($width,$height,$type) = GetImageSize($image);
  7. 		if ($im = ReadImageFromFile($image, $type)) {
  8. 			if ($newwidth==0)
  9. 				$newwidth = ($newheight / $height) * $width;
  10. 			else if ($newheight==0)
  11. 				$newheight = ($newwidth / $width) * $height;
  12. 			elseif ($newheight && ($width < $height))
  13. 				$newwidth = ($newheight / $height) * $width;
  14. 			else
  15. 				$newheight = ($newwidth / $width) * $height;
  16.  
  17. 			if (function_exists('ImageCreateTrueColor'))
  18. 				$im2 = ImageCreateTrueColor($newwidth,$newheight);
  19. 			else
  20. 				$im2 = ImageCreate($newwidth,$newheight);
  21.  
  22. 			if (function_exists('imagealphablending'))
  23. 				imagealphablending($im2, false);
  24. 			if (function_exists('imagesavealpha'))
  25. 				imagesavealpha ($im2 , true);
  26.  
  27. 			if (function_exists('ImageCopyResampled'))
  28. 				ImageCopyResampled($im2,$im,0,0,0,0,$newwidth,$newheight,$width,$height);
  29. 			else
  30. 				ImageCopyResized($im2,$im,0,0,0,0,$newwidth,$newheight,$width,$height);
  31.  
  32. 			if (WriteImageToFile($im2, $newimage, $type))
  33. 				return true;
  34. 		}
  35. 		return false;
  36. 	}
  37. 	function ReadImageFromFile($filename, $type) {
  38. 		$imagetypes = ImageTypes();
  39. 		switch ($type) {
  40. 			case 1 :
  41. 				if ($imagetypes & IMG_GIF)
  42. 					return $im = ImageCreateFromGIF($filename);
  43. 				break;
  44. 			case 2 :
  45. 				if ($imagetypes & IMG_JPEG)
  46. 					return ImageCreateFromJPEG($filename);
  47. 				break;
  48. 			case 3 :
  49. 				if ($imagetypes & IMG_PNG)
  50. 					return ImageCreateFromPNG($filename);
  51. 				break;
  52. 			default:
  53. 				return 0;
  54. 		}
  55. 	}
  56. 	function WriteImageToFile($im, $filename, $type) {
  57. 		switch ($type) {
  58. 			case 1 :
  59. 				return ImageGIF($im, $filename);
  60. 			case 2 :
  61. 				return ImageJpeg($im, $filename, 85);
  62. 			case 3 :
  63. 				return ImagePNG($im, $filename);
  64. 			default:
  65. 				return false;
  66. 		}
  67. 	}
  68. ?>

Voilou voilou. Je reconnais que c'est aussi parce que paradoxalement je n'aime pas trop les plugins de galerie de dotclear (pas assez user friendly peut etre) et aussi que je ne veux pas qu'il y ait une jquery, et d'autres scripts javascript pesant plusieurs mégas en permanence dans le <head> du code mon blog. Cependant la refonte du gestionnaire de médias de dotclear est apparemment prévu dans les développements à venir[2].

Notes

[1] Non je fabule, mais ça me fait plaisir d'introduire ce billet de cette manière.

[2] Blog Dotclear » Etat des lieux en décembre

gnieark dimanche, janvier 2 2011, 18:21 dev web
Page top