Slide show HTML

Bonjour à toutes et à toutes

Voici mon petit problème :

Je voudrais créer une petite page HTML (avec du Java Script ou une applet java ?) qui se rafraichisse toutes les x secondes en affichant à la manière des économiseurs d'écrans, une image en plein centre. Cette image possède un nom qui s'incrémente img1.jpg, img2..jpg... au gré des utilisateurs qui me les déposent dans un répertoire partagé Windows. En fait, il faut que l'image affichée soit celle qui numériquement possède le plus haut nombre ou la dernière en date. Est-ce possible ?

Merci

20 réponses

Résumé de la discussion

On cherche à créer une page HTML (avec JavaScript ou applet Java) qui se rafraîchit à intervalles réguliers pour afficher une image centrée, puisant dans un répertoire partagé Windows. L'image affichée doit être celle numériquement la plus élevée ou la dernière en date, les noms étant img1.jpg, img2.jpg, etc., déposés par les utilisateurs dans le répertoire. Plusieurs approches proposent des idées allant du remplacement du défilement par des scripts JavaScript simples à des solutions PHP côté serveur, soulignant les limites des balises obsolètes et des dépendances navigateur. En environnement sans serveur, certaines solutions expérimentales préconisent un chargement périodique via des scripts dans la page et l'accès dynamique à imgN.jpg, mais la compatibilité et le rafraîchissement dépendent du navigateur.

Bobot (l’IA à votre service)
  1. Salut !

    Je dirais que oui...

    ... déjà, un truc comme ceci, c'est pas super joli, mais ça doit marcher...

    <?php

    if (array_key_exists("id", $_GET))
    $id = $_GET["id"];
    else
    $id = 0;
    $id = $id + 1;
    header( "refresh: 5; url=this.php?id=$id" );
    echo "<p><img src='img$id.jpg'></p>"
    ?>

    Michael.

    Ne vous souciez pas de n'être pas remarqué ; cherchez 
    plutôt à faire quelque chose de remarquable [Confucius]
    1
    1. Merci pour ta réponse rapide, grofwa, mais surtout pas de php car je n'ai pas de serveur à ma disposition. En fait j'ai un micro en présentoir et chaque fois qu'un collègue me dépose une photo dans mon rép partagé, cette page doit l'afficher... En tout cas merci.
      0
    2. Salut,
      header( "refresh: 5; url=this.php?id=$id" ); ca marche pas en reseau faut faire autre chose en se servant par exemple du redirection javascript
      0
  2. Bonjour,

    La balise <marquee> est obsolète, c'est officiel depuis longtemps.
    Cela veut dire que les versions suivantes des navigateurs internet ne sont pas obligés de l'interpréter
    (et même encouragés à ne plus le faire du tout)

    En ce qui concerne ie7, je ne sais pas. Mais toutes les anciennes versions de ie jusqu'à la 6 et les navigateurs de type mozilla (firefox, mozilla, iceweasel) interprètent convenablement cette balise, du moins lors de mes derniers tests.

    Au revoir.
    1
    1. Contributeur
      SALUT
      tout est dans le fichier a telecharger
      http://radservebeer.free.fr/menu-files/slidejs/slidejs.rar

      tu met entre les head de la page cette ligne (et tu met le fichier "banner.js" a cote de ta page)
      <script type="text/javascript" src="banner.js"></script>


      et dans le body a l endroit ou tu veux le slide tu met
          <div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;">
      	<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
      		<a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" /></a>
                <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
               <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
              <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
      		<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
      			<a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
                <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
               <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
              <a href="http://url du lien">
                <img src="ton image.gif" width="126"height="44" border="0" />
      		</div>
      	</div>
      </div>


      <MARQUEE BEHAVIOR="alternate"></MARQUEE>
      marquee est obsolete ne pas l utiliser !!!!

      RAD
      1
      1. Salut RAD,

        Je souhaite créer un slideshow

        Ton code servirait juste à remplacer le <marquee> Rien d'autre? Ce qui voudrait dire qu'on aurait juste le défilement latéral avec le gros blanc ( nou noir) pour faire le lien entre les images?

        J'ai quand même téléchargé ton fichier qui servirait de dossier pour les images à incorporer à un widget en HTML sur mon blog. J'ai pas compris tes explications

        (et tu met le fichier "banner.js" a cote de ta page)
        - Comment on le met ce fichier "banner.js"?
        - quel page?

        Sinon le but serait de mettre :

        1) soit un slide show en image d'ouverture principale avec des images cliquables de 10 s qui défilerait rapidement 1s pour revenir en arrière et vis versa.

        ou

        2) un Slideshow en fondu enchainé (mais çà je ne sais vraiment pas comment faire!)

        Donc voilà

        J'attends des nouvelles de ta part!

        P.S : ton site est top, très dynamique! J'aime bien!
        0
      2. J'passais juste voir, sympa d'avoir réagi rapidement.
        Je télécharge en rantrant chez moi ton soft et je te dis quoi!

        @tt
        0
      3. Bon voilà je reviens vers toi.

        Alors j'ai bien télécharger ton soft. J'ai un "add image" alors j'ajoute les photos pour créer le slideshow. Je les vois apparaître en format slideshow. Mais ensuite, c'est comme si il me faisait en sorte que je n'avais rien fait. Je reclick alors tout en haut dans "create slideshow" mais lors que la fenetre de dialogue s'ouvre, je ne sais plus "ajouter les images" car le seul format que l'on propose c'est le html. J'ai même sauvegardé le slideshow que j'avais crée au tout début et même celui ci je ne sais pas le récuperer.

        Si je réussi : parcontre si je comprends bien quand le slideshow est crée je n'ai juste qu'à récuperer le code HTML et le copier sur un des widget en html sur mon blog
        0
      4. Contributeur
        Salut
        Je suis en déplacement et je n ai que mon iPhone
        Mais tu as bien choisi un dossier pour sauvegarder les fichiers ??
        , je comprend pas ,si tu a choisi un dossier de sauvegarde dans les options du software tu devrais tout retrouver dans ce dossier ,les html,js,css,images!
        Sinon je te répond plus en détail lundi soir
        0
    2. Rien ne t'empeche d'installer un petit serveur Apache avec PHP sur ton micro...

      Ne vous souciez pas de n'être pas remarqué ; cherchez 
      plutôt à faire quelque chose de remarquable [Confucius]
      0
      1. Bonjour

        est ce qu 'il existe un site qui permet de créer un slide d'image qui fait que lorsqu"on clique sur l'image il permet une ouverture de page internet.

        ou le monter soit meme sur un logiciel

        pour ensuite le mettre sur myspace donc en css me semble - t il?
        0
        1. Contributeur
          salut

          va faire un tour sur le site de notre RAD national :)
          0
          1. qui c'est ? :) curieuse de savoir de quoi tu parles...

            mais sinon j'ai trouvé :

            <marquee>
            <a href=" htlm que vous voulez faire ouvrir" target="_blank">
            <img src=" http://image.jpg " width="200" height="160" border="0" />
            <a href=" htlm que vous voulez faire ouvrir" target="_blank">
            <img src=" http://img2.jpg " width="160" height="160" border="0" />
            </a></marquee>

            par contre il s'agit d'un défilement à l'horizontal.

            pour plus de choix c'est par ici http://www.csvt.qc.ca/patriotes/html/code_spec/xmpl_mrq.htm
            0
            1. Contributeur
              SALUT

              RAD c est moi loool :-)) RAD ZONE c est mon site :-))

              si tu veux un simple slide vertical d images avec liens sur image j avais fais celui ci il y a qq temps
              ICI

              telecharge le et adapte a ta page !

              il y as d autres solutions mais celle ci est simple et fonctionne partout!!

              RAD
              0
          2. Bonjour,

            Je rejoins Grofwa pour l'installation d'un serveur local sur votre Windows.
            Le code me paraît rudimentaire, mais il a l'air efficace à première vue.

            Si cela ne fonctionne pas bien, ou n'offre pas assez de fonctionnalité, il existe des librairies de code téléchargeables gratuitement et installables sur votre serveur local très facilement.

            Le slide en java... C'est aussi facile que le serveur local, sauf qu'il faut des connaissances en java.
            Le slide en javascript... C'est encore plus facile que les deux autres, sauf qu'il faut des connaissances en javascript.

            Et la première des choses à savoir... C'est quel langage de programmation vous allez utiliser.
            0
            1. par contre le code <marquee> ne défile pas sous explorer.
              0
              1. bonsoir
                en fait la balise marquee fonctionne sous explorer ce qu'il faut mettre

                <HTML>
                <BODY>
                <marquee>
                <a href=" htlm que vous voulez faire ouvrir" target="_blank">
                <img src=" http://image.jpg " width="200" height="160" border="0" />
                <a href=" htlm que vous voulez faire ouvrir" target="_blank">
                <img src=" http://img2.jpg " width="160" height="160" border="0" />
                </a></marquee>
                </marquee>
                </BODY>
                </HTML>

                Par contre j'ai testé divers défilement, le plus propre serait le "va et vient" illustrée pas la balise suivante
                <MARQUEE BEHAVIOR="alternate"></MARQUEE>
                qui cette fois ci fonctionne correctement sous explorer mais pas sur firefox. une solution pour qu'elle puisse s'afficher sur ces deux navigateur?
                0
                1. Oopss bonsoir RAD je n'avais pas apercu le message plus haut. merci pour le lien et d'ailleurs j'étais tombé sur ta page en cherchant un peu au sujet des slides sans trop faire attention au nom de ton site (navrée) qui est opérationnel soit dit en passant.

                  cependant j'avais essayer d'après le code source rien n'est fait, je dois coller quoi exactement?

                  même si j'ai réussi à peu près ce que je voulais faire je voudrais en savoir plus.

                  merci pour les conseils.

                  "Par contre j'ai testé divers défilement, le plus propre serait le "va et vient" illustrée pas la balise suivante
                  <MARQUEE BEHAVIOR="alternate"></MARQUEE>
                  qui cette fois ci fonctionne correctement sous explorer mais pas sur firefox. une solution pour qu'elle puisse s'afficher sur ces deux navigateur?"
                  0
                  1. Merci rad

                    <MARQUEE BEHAVIOR="alternate"></MARQUEE> testée sur explorer marche niquel. lol

                    par quoi la remplacer?

                    ou est ce qu il existe une page qui référence plus ou moins toutes les marques qui existent.
                    0
                    1. Contributeur
                      <MARQUEE BEHAVIOR="alternate"></MARQUEE>
                      n existe pas ! mais il ni as rien en html qui le remplace !

                      de plus cela rend la page non valide W3C

                      RAD
                      0
                      1. Bonjour,
                        je voudrais savoir comment mettre mon slide show sur myspace..je suis passée par le mode sans echec san succes je ne comprends pas...si quelqu un pourrait m aider...merc ibeaucoup
                        0
                        1. moi mon probleme c'est que le texte defile pour tout les explorateur tres connue (IE ;FF ;opera ;safari mais sous firefox le texte part du millieux du bloc et defile ensuite au lieu de reaparaitre du cote droit du bloc
                          0
                          1. jai aussi le probleme mait la c'est pour tout les navaigateur internet je veut faire defile des photo a l'interieur dun bloc mait le probleme c que si je met plusieur photo defilant d'un cote vers l'autre elle defile aligner de bas en haut
                            exemple vaut pour le msg 18
                            voir le lien http://www.lariviere-photo.com/indextest.html
                            0
                            1. Un petit soucis avec ce code :
                              if(parseFloat(id1.style.top) == -(height/2)) {

                              si height est impaire, ca ne marche pas...remplacer par :
                              if(parseFloat(id1.style.top) <= -(height/2)) {
                              0
                              1. Bonjour,
                                Je souhaiterais réouvrir ce sujet.
                                J'aimerais faire un slide show en php/js, exactement ce que propose RAD ZONE.
                                Pourtant j'arrive pas à adapter son code...

                                Entre mes balises head j'ai mis : <script type="text/javascript" src="slide_js/banner.js"></script>
                                Et au sein de ma div qui appelle l'animation, j'ai copié collé betement le code de RAD ZONE.

                                function affichage_Reducs() {
                                connect();
                                global $tab;
                                remplissage_Tableau_reduction();
                                ?>
                                <div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;">
                                <div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
                                <a href="http://www.apache.org/">
                                <img src="apache.gif" width="126"height="44" border="0" /></a>
                                <a href="https://twitter.com/douglashaan">
                                <img src="banner_haan_net_en.gif" width="120" height="60" border="0" /></a>
                                <a href="https://www.linux.org/">
                                <img src="linux.gif" width="126"height="64" border="0" /></a>
                                <a href="https://www.mysql.com/">
                                <img src="mysql.gif" width="126" height="44" border="0" /></a>
                                <a href="https://www.php.net/">
                                <img src="php.gif" width="126" height="44" border="0" /></a>
                                <a href="https://ubuntu.com/">
                                <img src="ubuntu.gif" width="126" height="34" border="0" /></a>
                                <div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
                                <a href="http://www.apache.org/">
                                <img src="apache.gif" width="126"height="44" border="0" /></a>
                                <a href="https://twitter.com/douglashaan">
                                <img src="banner_haan_net_en.gif" width="120" height="60" border="0" /></a>
                                <a href="https://www.linux.org/">
                                <img src="linux.gif" width="126"height="64" border="0" /></a>
                                <a href="https://www.mysql.com/">
                                <img src="mysql.gif" width="126" height="44"border="0" /></a>
                                <a href="https://www.php.net/">
                                <img src="php.gif"width="126" height="44" border="0" /></a>
                                <a href="https://ubuntu.com/">
                                <img src="ubuntu.gif" width="126" height="34" border="0" /></a>
                                </div>
                                </div>
                                </div>

                                <?php
                                }

                                Ce que je vois à l'écran c'est un ligne noir toute fine.
                                Lorsque je fais la comparaison avec Firebug entre la version de RAD et la mienne, je vois que chez la sienne les éléments sont bien les uns en dessous des autres. Chez moi, c'est en ligne...et de taille minuscule.
                                De plus, le javascript fonctionne pas je suppose...(rien à voir avec le navigateur...)

                                Merci de m'aider
                                0