album photos intégré sur site internet

... avec possibilité d'ajout de photos depuis smartphone...

15 décembre 2017 à 20:34:45

Bonjour,

Je suis débutant et je suis actuellement en train de programmer mon site Internet. Je cherche à savoir s'il existe une solution technique au problème suivant :

Je souhaiterais intégrer sur une des pages de ce site internet un album photos (provenant d'un site extérieur, d'une application ou d'un service de stockage/partage d'images).

Je souhaiterais que la façon dont cet album photo est intégré permette une mise en ordre et une visualisation esthétiques des images. Un truc propre, avec, par exemple, des petites vignettes miniatures des images, lesquelles s'ouvrent en grand lorsque le visiteur clique dessus.Et puis la possibilité de les faire défiler façon "slideshow".

Mais il faudrait également que je puisse, depuis et avec mon smartphone, prendre une photo, l'envoyer/l'intégrer/la relier le plus simplement possible à cet "album", ce qui aurait pour effet qu'elle se retrouverait alors immédiatement visible sur la page de mon site internet intégrant l'album.

Arf... je ne sais pas si je suis clair... En fait, je veux juste trouver un moyen pour faire en sorte qu'une photo prise sur smartphone puisse se retrouver simplement et immédiatement sur un site internet personnel. Et par "simplement et immédiatement", il faut entendre : sans toucher au code HTML du site. Juste en quelques clics, quoi !

J'ai cru comprendre, peut-être à tord, que PICASA (Google) permettait quelque chose comme cela, mais étant donné que ce service n'existe plus....

Je vous remercie tous pour votre aide et vos idées de solution,

Bonne journée/soirée.

-
Edité par PieHe 15 décembre 2017 à 20:36:11

Gh0stFive

15 décembre 2017 à 22:42:52

Salut,

Pour faire ca, il te faut: du JS + PHP (avec le html et css)

<html>
<head>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

  <script>
    $(document).ready(function(){
      $('.slider').bxSlider();
    });
  </script>
	<style>img { margin:auto;};</style>
</head>
<body >

  <?php
  //si tu veux "securiser vite fait": tu mets le if avec $_GET['id'] sinon tu l'enlèves
  //size en octet = taille de ton fichier (au max)
  
  
  $controle = function ($file, $size = 10000000, $extFile = ['jpg', 'jpeg', 'png']) {
		if(!empty($file) && is_array($file)) {
			if (isset($file['error']) && isset($file['size']) && isset($file['name']) && isset($file['tmp_name']) && $file['error'] == 0 && $file['size'] <= $size) {
				$infosfichier = pathinfo($file['name']);
				$extension_upload = $infosfichier['extension'];
				$extension_autorisees = $extFile;
				$extension_while = '';
				$a = -1;
				while (1) {
					if (preg_match('#\.#', substr($file['name'], $a))) {
						$a++;
						$extension_while = substr($file['name'], $a);
						break;
					}
					$a--;
					if($a < -20) {
						break;
					}
				}
				return in_array($extension_upload, $extension_autorisees) && $extension_upload == $extension_while;
			}
		}
		return 0;
	};
	$getFolder = function ($Directory, $file_or_folder = false) {
		/* 0 == file || 1 == folder*/
		$file_or_folder = $file_or_folder == 0 ? false : true;
		$MyDirectory = opendir($Directory) or die('Erreur');
		$a = [];
		while ($Entry = @readdir($MyDirectory)) {
			$info = new \SplFileInfo($Directory . '/' . $Entry);
			$extension = pathinfo($info->getFilename(), PATHINFO_EXTENSION);
			if (!in_array($Entry, ['.', '..'])) {
				if (!$file_or_folder && $extension) {
					$a[] = $Entry;
				} elseif ($file_or_folder && !$extension) {
					$a[] = $Entry;
				}
			}
		}
		if(empty($a)) {
			return [];
		} else {
			asort($a);
			return $a;
		}
	};
	
	$creatFolder = function ($name)
    {
        $name = explode("/", $name);
        $name_url = '';
        foreach ($name as $i => $e) {
            if (!empty($e)) {
                $name_url .= $e . '/';
                !is_dir($name_url) && mkdir($name_url);
            }
        }
        return is_dir($name_url);
    };
	
  $dossier_de_sauvegarde = "TON_DOSSIER/";
  $protocole = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://";
  $url_du_site = $_SERVER['HTTP_HOST'] . "/";
  $url_de_la_page = $url_du_site.strtok($_SERVER["REQUEST_URI"],'?');;
  $creatFolder($dossier_de_sauvegarde);
  $MON_MOT_DE_PASSE = "MON_MOT_DE_PASSE";
	
  if(isset($_GET['id']) && !empty($_GET['id']) && $_GET['id'] == $MON_MOT_DE_PASSE) //tu auras une url de cette forme: http://tonsite.php?id=MON_MOT_DE_PASSE
  {
  ?>
    <form action="<?php echo $protocole . preg_replace('#/{1,}#', '/', $url_de_la_page)."?id=".$MON_MOT_DE_PASSE ?>" method="POST" enctype="multipart/form-data">
		<input type="file" name="MON_IMAGE"/>
		<input type="submit" value="Envoyer"/>
	</form>
  <?php
	if(isset($_FILES['MON_IMAGE'])) {
		
		 if($controle($_FILES['MON_IMAGE'])) {
			$nouveau_nom = $dossier_de_sauvegarde . time().".".pathinfo($_FILES['MON_IMAGE']['name'], PATHINFO_EXTENSION);
			if ($creatFolder($dossier_de_sauvegarde) && move_uploaded_file($_FILES['MON_IMAGE']['tmp_name'], $nouveau_nom)) {
				 echo "Image envoyer sur le serveur !";
			} else {
				echo "impossible de copier l'image";
			}
		 }
		 else {
			echo "l'image ne respecte pas le format ou la taille";
		 }
	  }
  }
  ?>
  
    <div class="container" style="width:60%;min-width:300px;margin:auto;">
	  <div class="slider">
		<?php
		$tes_image = $getFolder($dossier_de_sauvegarde);

		if(empty($tes_image)) {
			echo "<div>Aucun contenu</div>";
		}
		else {
			foreach($tes_image as $value) {
			   echo '<div><img src="'.$protocole.$_SERVER['HTTP_HOST']."/".$dossier_de_sauvegarde.$value.'"/></div>';

			}
		}
		?>
	  </div>
  </div>
</body>
</html>

c'est un code non séparé donc dégeux mais ca marche à toi de regarder comment ca fonctionne et de l'améliorer j'ai fait ca vite fait.

Pour heberger va par exemple sur hostinger tu prends un herbergement gratuit, tu télécharges fillezilla et tu rentres les codes qu'ils t 'ont donné, tu transfert un fichier nommé "index.php" à la racine avec ce code dedans... et puis voila !

Bon courage à toi

-
Edité par Gh0stFive 15 décembre 2017 à 22:51:19

PieHe

15 décembre 2017 à 22:56:32

Merci beaucoup !!! Je vais tester ça ! :-)