begin process at 2012 02 13 16:18:29
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

Galerie d'images


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Galerie d'images

jeudi 18 janvier 2007 à 16:23:40 | Galerie d'images

ginie_e

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

vendredi 19 janvier 2007 à 09:49:25 | Re : Galerie d'images

nickadele

Membre Club Administrateur CodeS-SourceS
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
vendredi 19 janvier 2007 à 11:40:47 | Re : Galerie d'images

ginie_e

Merci pour la réponse, j'ai fait mon site en xHtml...
dimanche 21 janvier 2007 à 23:44:10 | Re : Galerie d'images

rubiks10

Membre Club
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 --
lundi 22 janvier 2007 à 17:34:12 | Re : Galerie d'images

ginie_e

Non je n'utilise aucun serveur et désolée pour les termes, je débute.
lundi 22 janvier 2007 à 19:25:35 | Re : Galerie d'images

nickadele

Membre Club Administrateur CodeS-SourceS

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" " [ Lien ]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 1 - Image 1</title>
</head>
<body>
<img src="images/image1.jpg" border="0">
<a href="page2.html" target="_self">suivant</a>
</body>
</html>

Page 2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " [ Lien ]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 2 - Image 2</title>
</head>
<body>
<img src="images/image2.jpg" border="0">
<a href="page1.html" target="_self">précédent</a>
<a href="page3.html" target="_self">suivant</a>
</body>
</html>

Dernière page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " [ Lien ]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page 3 - Image 3</title>
</head>
<body>
<img src="images/image3.jpg" border="0">
<a href="page2.html" target="_self">précédent</a>
</body>
</html>


Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle

lundi 22 janvier 2007 à 20:13:08 | Re : Galerie d'images

rubiks10

Membre Club
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>
    <body>
          <!--  ici l'url de la 1ère image du tableau  -->
        <center>
          <div><img id="diapo" src="images/img1.jpg" height="500" /></div>
          <a href="#" onclick="return back()">Image précédente</a>
          <a href="#" onclick="return play()">AutoPlay</a>
          <a href="#" onclick="return stop()">Stop</a>
          <a href="#" onclick="return next()">Image suivante</a>
        </center>
    </body>
</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 --
lundi 22 janvier 2007 à 20:23:12 | Re : Galerie d'images

nickadele

Membre Club Administrateur CodeS-SourceS
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
lundi 22 janvier 2007 à 21:05:55 | Re : Galerie d'images

rubiks10

Membre Club
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 --
mardi 23 janvier 2007 à 13:38:24 | Re : Galerie d'images

ginie_e

Merci beaucoup pour vos réponses. J'ai donc utilisé la solution en javascript, et suis contente du résultat!

1 2

Cette discussion est classée dans : images, galerie


Répondre à ce message

Sujets en rapport avec ce message

Création d'une galerie d'images dynamique [ par joujou0000 ] j ai besoin de votre aide s-v-p, je suis debutant et je veux créer un site web contenant une galrie de photos dynamique avec du XHTML et du JAVASCRIPT Problème galerie d'images générée en js [ par way2web ] Bonjour,j'ai créé une galerie photo générée via javascript qui affiche 5 ou 7 photos par page en fonction de la résolution du visiteur, avec des liens codage galerie... [ par jarlaath ] Bonjour,je decouvre mootools et j'aimerais utiliser une fonction :le fx.elements. Je vous mets en lien ma page pour plus de clarté (galerie). Voici do galerie photo en javascript, erreur [ par siraniadam ] Bonjour, pourriez vous m 'aider , voici ma galerie photo , sur onmouseover , l image s affiche en grand !mais voila , plus rien ne marche message d er pb de préchargement des images [ par loblobloblob ] Bonjour,j'ai créer une galerie, mais j'aimerais que mes images soient charger dans la galerie sans devoir faire une ligne par image.On m'a dis de pass galerie d'images comme VisualLightBox [ par grafikus ] Bonjour, je cherche un script pour créer une galerie d'images comme VisualLightBox, savez-vous ou je peux là trouver. Merci d'avance Galerie d'images [ par homer59650 ] Bonjour je viens d'acheter un Kits graphique pour mon site internet, dans ce kits il présente une galerie d'image en javascript[img]http://nsa14.casim Transition d'un bloc avec images text etc.. [ par suxlelo ] Bonjour, j'aimerai mettre un script sur mon site comme celui-ci [url=http://www.smartreaming.com/]Tapez le texte de l'url ici.[/url] comme on peut c Redimensionner toutes les images d'un blog en fonction de la taille du navigateur [ par toine258 ] Bonjour à tous, Je suis administrateur du blog [url]http://www.toutestici.eu[/url] et comme vous pouvez le constater les images ne s'ajuste pas à la t upload d'images sans input de type file et sans AJAX [ par barbe91 ] Bonjour tous le monde, j'ai un très très gros problème en ce moment et après des heures de recherches je ne trouve rien, mais alors rien de rien...


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales