Friday, August 19, 2011

Défilement d'une image php/Javascript

Un bout de code pour défiler un repertoire d'images dans une page web en php:
(Ume image chaque 4 secondes)


 
<head>



<title>Defilement images</title>

<meta name="author" content="Wassim Jied coderspirit.blogspot.com" />



</head>

<body onLoad="rotate();">

<?php

$directory_name = "./themes/matrice/img/";

$extensions_ok = array ( ".jpg","jpeg",".gif",".png");

$folder = opendir ($directory_name);

$i = 0;

$photos = array();

while ($file = readdir ($folder))

{

if (in_array(strtolower(substr($file, -4)),$extensions_ok))

$photos[] = $directory_name."/".$file;

}

closedir ($folder);

$count_photos = count ($photos);

?>

<script type="text/javascript">

var rotate_delay = 4000; /*delais en microseconde (4000 = 4 secs)*/

var current = -1;

var photos = [<?php for($i=0;$i<$count_photos;$i++)

{

echo "\"".$photos[$i]."\"";

if($i!=$count_photos-1) echo ",";

}

?>];

function next() {

if (current<photos.length - 1)

++current;

else current = 0;

}

function rotate() {

if(photos.length > 0)

{

next();

document.images.slides.src = photos[current];

window.setTimeout("rotate()", rotate_delay);

}

}

  /*Original code from http://www.developpez.net/forums/d770199/webmasters-developpement-web/javascript/apercu-image-pop-up/ Thanks to the author , modified by WJ*/

function popImage(largeur,hauteur,options){



var top  = (screen.height-hauteur)/2;

var left = (screen.width-largeur)/2;

window.open(document.images.slides.src,"_blank","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);

}



</script>

<center>

<table>

<tr>

<td>

 <img src="/" id="slides"  onclick="javascript:popImage(730,620,'menubar=no,scrollbars=yes,statusbar=yes')" style="cursor:pointer;"/>

 

</td>

</tr>

</table>

</body>



25 comments:

  1. Très bon utilitaire. Est il possible de l'avoir avec le nom du fichier, et sa date affichée en dessous de image?

    ReplyDelete
  2. Bonsoir,
    Oui c'est possible voici le lien du nouveau code: (testé sous chrome v 17.0.963.56)

    http://coderspirit.blogspot.com/2012/02/defilement-dune-image-et-son-nom.html

    ReplyDelete
    Replies
    1. Bonjour,
      Merci beaucoup pour cette modification, cela fonctionne à merveille,
      sous Safari 5.1.1 et sous
      Internet Explorer 9.0.8112.16421
      Bala

      J'ai rajouté l'affichage de date du fichier.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Bonjour,
    Est il possible de faire afficher dans l'ordre alphabétique du nom du fichier?
    Bala

    ReplyDelete
    Replies
    1. y'a la fonction sort() qui fait le tri, j'ai modifié le code :-) voir
      http://coderspirit.blogspot.com/2012/02/defilement-dune-image-et-son-nom.html

      Delete
  5. Personnellement pour moi il ne fonctionne pas ...

    ReplyDelete
  6. C'est quoi l'erreur exactement?
    Peut être que ça vient du nom du repertoire contenant les images

    ReplyDelete
  7. C'est bien dans cette balise qu'on indique le nom du répertoire :
    img src="/" id="slides" width=120px height=120px

    Par exemple, si mes images sont dans un dossier appelée img, ça donnera :
    img src="img/" id="slides" width=120px height=120px

    Merci d'avance

    ReplyDelete
  8. bon ok j'ai compris, le dossier images doit s'appeler thumb

    ReplyDelete
  9. Bonjour,
    Je m'excuse pour le retard !
    Le rep des images peut être n'importe quoi juste indique le dans cette affectation
    $directory_name = "thumbs"; //thumbs dans cet exemple comme vous avez deviner

    ReplyDelete
  10. Superbe script !!!!! y a moyen de faire défiler les images de droite à gauche ?
    Merci en tout cas!!!!

    ReplyDelete
  11. Et aussi, serait-il possible de rendre l'image cliquable et que quand on clique sur l'image, une fenetre s'ouvre avec l'image originale pour l'avoir en grand ?

    ReplyDelete
  12. bonjour,
    j'ai fait ce code y'a un moment.
    La technique utilisée est un démodée, maintenant je vous conseille d'utiliser un plugin jquery essayer par exemple (les sliders)
    http://nivo.dev7studios.com/
    Vous aurez juste à couper la partie qui crée les url depuis le repertoire.
    Sinon je suis a votre disposition

    Merci à vous

    ReplyDelete
  13. Bonjour,

    Merci d'avoir répondu. J'ai essayé avec le jquery mais j'y comprends rien (trop d'offres, trop de sites, pas d'explication pour l'utilisation). Votre script est bien plus simple et super facile à utiliser. De plus, la plupart des scripts jquery concerne des listes de photos précises à saisir à la main (alors que je recherche un script qui affiche les photos de tout un dossier). Si j'en ai 1000, c'est impossible de tous les saisir à la main. Je voudrais juste rendre l'image cliquable et que quand on clique, on aboutisse sur une fenêtre avec l'image originale. Y a moyen de faire ça avec votre script ?

    ReplyDelete
  14. Si vous voulez un popup pour la tof ?
    ok...
    Sans probleme...
    Laisse moi unpeu de temps d'ici la nuit

    ReplyDelete
    Replies
    1. Merci beaucoup, c'est super sympa :) J'attends alors :)

      Delete
    2. Ok...
      Well done ...
      J'ai modifié le code la haut pour qu'il prend en compte le preview ...
      J'espère wue ça va aider :)
      Merci pour votre interet
      Url de test:
      http://ualshark.0fees.net/test-defilement.php

      Delete
    3. Nickel ! ça marche très bien. Merci beaucoup à vous :)

      Delete
    4. Bonsoir,

      Je reviens de nouveau vers vous car finalement, j'ai créé un script php pour faire afficher les dernières images postées, et non plus un répertoire.

      J'ai un souci pour intégrer votre code avec le mien.

      Pourriez-vous m'aider ? Merci d'avance.

      Voici mon code :


      // Definition des identifiants de connexion
      $DBHOST='sql2'; // Serveur Mysql
      $USEBDD='mabdd'; // Base de donnée utilisée
      $USER='moi'; // Administrateur de la bdd
      $PASSWORD='password'; // Mot de passe d'accès à la bdd

      // Connexion à MySQL :
      $link = mysql_connect($DBHOST,$USER,$PASSWORD);
      $db = mysql_select_db($USEBDD,$link);

      // Extraction photo

      $requete='SELECT * from soirees_events ORDER BY start_date desc';
      $result=mysql_db_query('mabdd',$requete);

      // Affiche resultats
      while($voir=mysql_fetch_array($result))
      {
      echo "
      <".$voir[picture]."'>
      ";
      }

      Delete
  15. Re,
    Sorry for the retard ...
    Vous pouvez essayer ce code :

    while ($file = readdir ($folder))
    {
    if (in_array(strtolower(substr($file, -4)),$extensions_ok))
    $photos[] = $directory_name."/".$file;
    }
    devient
    while($voir=mysql_fetch_array($result))
    {

    $photos[] = $directory_name."/".$voir[picture];
    }

    ReplyDelete
  16. Merci pour votre réponse. Mais en fait, il y a quelque chose que je ne comprends pas. Où est-ce que je dois mettre votre code javascript, et où est-ce que je dois mettre le code php que j'ai fait ?

    ReplyDelete
  17. Je vous laisse mon mail : specialspamm at gmail.com

    ça sera plus facile pour correspondre je pense, car blogspot bloque le code que je voulais mettre en commentaire :)

    ReplyDelete