Partage
  • Partager sur Facebook
  • Partager sur Twitter

Créer un visualiseur d'images

Anonyme
    9 octobre 2008 à 14:33:35

    Bonjour les gens,
    Bon en ce moment je cherche à faire des sites un peu plus élaborés, c'est pour ça que je m'intéresse à AJAX.
    Là je me suis fixé comme objectif de faire un visualiseur d'image en temps réel. Par exemple, on a une liste de miniatures dans la page, et un cadre dans lequel s'afficherait l'image sur laquelle on clique dans les miniatures, tout ça sans que la page ait à se recharger. J'ai (rapidement j'avoue) parcouru le tuto sur AJAX et je suis tombé sur la technique des iFrames. Le fait est que pour l'instant, mes connaissances en JS sont médiocres, et je ne sais pas comment faire pour afficher une image plutôt que du texte à partir de cet exemple.

    D'autre part, les iFrames ayant été délaissées avec le XHTML, est-ce qu'il existe des solutions similaires mais étant valides XHTML 1.0 ?

    Enfin, pour afficher mes miniatures, j'utilise un script (créé à partir d'un des tutos officiels du site) pour générer automatiquement n pages comportant chacune x éléments. Est-ce qu'il existe aussi un moyen de faire en sorte que ces pages puissent être parcourues aussi SANS recharger la page où est contenu le visualiseur ?

    Mille mercis aux Zéros qui voleront à mon secours ! ^^
    • Partager sur Facebook
    • Partager sur Twitter
      9 octobre 2008 à 15:39:05

      Ce n'est pas une bonne technique d'utiliser une iframe pour ça. Le plus simple est d'utiliser XMLHttpRequest qui demande à un script PHP de lui renvoyer la liste des images à afficher (en cherchant dans un répertoire, base de données...), et ensuite de récupérer cette liste et d'afficher les miniatutes. Et quand l'utilisateur cliquera sur l'une d'entre elles, elle s'affichera en grand.

      Mais pour faire ça il vaut mieux un peu se débrouiller en Javascript. Javascript est comme n'importe quel langage, on ne peut pas prétendre faire quelque chose de correct sans le connaitre, et c'est la grosse erreur que font la plupart des webmasters en allant chercher des scripts tous faits sans les comprendre.
      • Partager sur Facebook
      • Partager sur Twitter

      Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

      Anonyme
        9 octobre 2008 à 15:42:46

        Ah mais justement, je cherche à comprendre ;) De manière générale, dès que je pompe un script, je l'étudie pour le comprendre et l'améliorer à ma sauce, sinon je progresserai jamais :)
        Je vois bien comment fonctionne le script que j'ai cité, le truc c'est qu'il me manque des noms de fonctions.

        Enfin merci pour la piste, je vais aller voir ça quand j'aurai le temps de m'y mettre à tête reposée.
        • Partager sur Facebook
        • Partager sur Twitter
          9 octobre 2008 à 17:25:22

          Yop,
          J'vais pas me plonger dans de longues explications, mais j'ai bidouillé quelques scripts pour tester diverses fonctions, ils ne sont pas très propres ni optimisés puisqu'ils ne servaient qu'à tester des choses spécifiques, mais ils pourront peut-être te donner quelques idées.

          Le premier est un système sensé permettre de créer une galerie basique très facilement : c'est un fichier index.php, on le colle dans un dossier, il le parcourt, regarde les images qui s'y trouvent et affiche une petite galerie. L'utilité est de pouvoir partager facilement des photos juste en uploadant un dossier et en collant ce fichier à l'intérieur.
          Exemple en fonction ici : galerie basique
          Le code PHP qui parcourt le dossier ressemble à cela :
          <?php
          //Extensions autorisées
          $array_extensions = array('jpg', 'png', 'gif');
          
          //Liste des images du dossier
          $images = array();
          $dir = $_SERVER['DOCUMENT_ROOT'].dirname($_SERVER['PHP_SELF']);
          $dir_open = opendir($dir);
          
          while($file = readdir($dir_open)){
          	if(is_file($dir.'/'.$file)){
          		$extension = strtolower(substr($file, strpos($file, '.')+1, strlen($file)));
          		if(in_array($extension, $array_extensions)){
          			$images[] = dirname($_SERVER['PHP_SELF']).'/'.$file;
          		}
          	}
          }
          closedir($dir_open);
          
          if(!count($images)){
          	die('Aucune image trouvée dans le dossier.');
          }
          ?>
          


          Un autre exemple beaucoup plus poussé au niveau visuel et de l'utilisation du javascript : galerie avec un scroll js et un effet d'opacité lors de la transition
          Le code javascript se trouve ici.
          • Partager sur Facebook
          • Partager sur Twitter

          Créer un visualiseur d'images

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown