Galerie d'images

Signaler
Messages postés
6
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
18 mai 2007
-
Messages postés
20
Date d'inscription
mardi 28 septembre 2004
Statut
Membre
Dernière intervention
22 mai 2008
-
Bonjour à toutes et à tous,

Je suis en train de réaliser une galerie sur ma page web, mais je ne
sais la faire qu’en mettant des imagettes sur lesquelles on clique pour
qu’elles apparaissent en grand.
Cette fois-ci j’aimerais juste mettre
des flèches (ôter les vignettes) pour simplement faire défiler les images.
Quelqu’un peut-il m’aider, je suis perdue !

Merci d’avance pour vos réponses

12 réponses

Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,
en fait tout dépend de la technologie que tu as coté serveur, page dinamique (php, asp,...) ou alors statique html. Car c'est coté serveur que tout va se passer et non coté client.

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Messages postés
6
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
18 mai 2007

Merci pour la réponse, j'ai fait mon site en xHtml...
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
3
Salut

lol....
XHTML n'a rien a voir avec une technologie!!!! on veut savoir si tu utilises un serveur PHP,ASP,JSP etc.. ??? ou alors si tu fais des pages statiques seulement du code HTML.

-- The Rubik's Man --
Messages postés
6
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
18 mai 2007

Non je n'utilise aucun serveur et désolée pour les termes, je débute.
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,

pas de soucis, on est tous là pour apprendre d'un autre.
Donc, si tu ne disposes pas de technologie serveur on va faire au plus simple et au niveau débutant soit une page par image :

Première page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 1 - Image 1</title>
</head>

[page2.html suivant]

</html>

Page 2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 2 - Image 2</title>
</head>

[page1.html précédent]
[page3.html suivant]

</html>

Dernière page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 3 - Image 3</title>
</head>

[page2.html précédent]

</html>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
3
Salut

Oui ou alors une méthode un peu plus compliquée... mais bon ici on est bien en javascript non ???
voici le code :

<html>
    <head>
        <script type="text/javascript">
            imagesTab = [
                'images/img1.jpg',         // dans ce tableau toutes les url de tes images
                'images/img2.jpg',
                'images/img3.jpg',
                'images/img4.jpg',
                'images/img5.jpg',
              
            ];
            currentImgPtr = 0;
            timeId = null;
            autoPlayTimer = 3;   // tu peux mettre ici en seconde le temps d'attente pour le défilement auto des images
           
            function next() {                currentImgPtr currentImgPtr imagesTab.length-1 ? 0 : currentImgPtr+1;
                document.getElementById('diapo').src = imagesTab[currentImgPtr];
                return false;
            }
            function back() {                currentImgPtr currentImgPtr 0 ? imagesTab.length-1 : currentImgPtr-1;
                document.getElementById('diapo').src = imagesTab[currentImgPtr];
                return false;
            }
            function play() {
                timeId = setInterval(next,autoPlayTimer*1000);
                return false;
            }
            function stop() {
                clearInterval(timeId);
                return false;
            }
        </script>
    </head>
   
          <!--  ici l'url de la 1ère image du tableau  -->
        <center>
         

          [# Image précédente]
          [# AutoPlay]
          [# Stop]
          [# Image suivante]
        </center>
   
</html>

Voilà a toi de mettre les bonnes url de tes images dans le tableau, de changer si tu veux la taille de l'image ( height ou width ) et si tu veux aussi changer la valeur de l'attente pour le mode autoplay.

Cette méthode a l'intérêt de faire un diaporama dynamique sans rechargement de page...

bonne prog @+
-- The Rubik's Man --
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

rubiks,

oui oui, on est bien sur javascript , mais j'ai fait au plus simple, il s'agit d'un débutant !
sinon, nickel, c'est ce qu'on appel une version évoluée

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
3
Ok Ok mais bon c'est vraiment du javascript de débutant que j'ai fait également lol.
Non mais au moins ca va le faire progresser en javascript puisque le code du diaporama est vraiment simple. Autant que nos posts aient un double intérêt donner une réponse et faire progresser...

++

-- The Rubik's Man --
Messages postés
6
Date d'inscription
jeudi 18 janvier 2007
Statut
Membre
Dernière intervention
18 mai 2007

Merci beaucoup pour vos réponses. J'ai donc utilisé la solution en javascript, et suis contente du résultat!
Messages postés
1
Date d'inscription
mercredi 16 août 2006
Statut
Membre
Dernière intervention
7 mars 2007

Salut, c très bien ton code javascript merci de l’avoir poster. Pour moi je cherche à créer un gif animé a partir des plusieurs images. J’utilise le php comme langage. Merci bien
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
3
Salut pour creer des gifs animés tu as besoin d'un logiciel de création/retouche de photo.

-- The Rubik's Man --
Messages postés
20
Date d'inscription
mardi 28 septembre 2004
Statut
Membre
Dernière intervention
22 mai 2008

Bonjour,
est-ce la meme technique si c'est des vidéo ? une liste de vidéos, ou de musiques ?

'images', dans le code est le chemin du répertoire ?

et peut-on ne le mettre qu'une fois en variable...

var = 'le chemin'
comment écrit-on  alors...?
imagesTab = [
                'var/img1.jpg', etc ?

merci pour le coup de pouce...