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>
Posted by at

25 comments:

  1. BalaFebruary 21, 2012 at 3:00 PM

    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. wassimovicFebruary 21, 2012 at 3:37 PM

    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. BalaFebruary 22, 2012 at 4:18 AM

      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. BalaFebruary 22, 2012 at 4:59 AM

    This comment has been removed by the author.

    ReplyDelete
  4. BalaFebruary 22, 2012 at 5:00 AM

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

    ReplyDelete
    Replies
    1. wassimovicFebruary 22, 2012 at 8:10 AM

      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. BalaFebruary 23, 2012 at 2:27 PM

    Merci beaucoup.

    ReplyDelete
  6. wassimovicFebruary 23, 2012 at 2:31 PM

    avec plaisir!

    ReplyDelete
  7. AnonymousJuly 2, 2012 at 1:47 PM

    Personnellement pour moi il ne fonctionne pas ...

    ReplyDelete
  8. wassimovicJuly 2, 2012 at 11:55 PM

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

    ReplyDelete
  9. dreyOctober 2, 2012 at 1:07 AM

    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
  10. AnonymousOctober 2, 2012 at 4:04 AM

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

    ReplyDelete
  11. wassimovicOctober 2, 2012 at 1:40 PM

    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
  12. AnonymousJanuary 10, 2013 at 7:04 PM

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

    ReplyDelete
  13. AnonymousJanuary 10, 2013 at 8:27 PM

    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
  14. wassimovicJanuary 11, 2013 at 10:11 AM

    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
  15. AnonymousJanuary 11, 2013 at 2:08 PM

    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
  16. wassimovicJanuary 13, 2013 at 3:32 AM

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

    ReplyDelete
    Replies
    1. AnonymousJanuary 13, 2013 at 11:30 AM

      Merci beaucoup, c'est super sympa :) J'attends alors :)

      Delete
    2. wassimovicJanuary 13, 2013 at 1:14 PM

      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. AnonymousJanuary 13, 2013 at 6:46 PM

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

      Delete
    4. AnonymousJanuary 29, 2013 at 6:28 PM

      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
  17. wassimovicJanuary 30, 2013 at 12:31 PM

    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
  18. AnonymousJanuary 30, 2013 at 5:11 PM

    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
  19. AnonymousJanuary 30, 2013 at 5:57 PM

    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

Subscribe to: Post Comments (Atom)