Bonton Suivant/Précédant

Suite tuto dynamisez-vos-sites-web-avec-javascrip

27 mars 2015 à 2:50:34

Salut à tous!

Je viens de finir le tuto : http://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/les-images-1

Tout fonctionne correctement mais j'aurais aimé aller plus loin en ajoutant les boutons Précédant et Suivant pour passer d'une image à l'autre.

Le soucis, c'est que je n'ai aucune idée de comment faire ça.

Y aurait-il un tuto? Où est-ce que vous auriez des pistes?

Parce que ça fait pas loin de 1h30 que je cherche et je ne trouve absolument rien..

Merci!

FireCube

27 mars 2015 à 19:54:21

Bon voila, je viens de passer moi aussi un bon moment à retourner ce code et voila le résultat :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Partie III - Chapitre 8 - Mise en pratique</title>

    <style>
        #overlay {
            display : none; /* Par défaut, on cache l'overlay */

            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;
            text-align: center; /* Pour centrer l'image que l'overlay contiendra */

            /* Ci-dessous, j'applique un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
            background-color: rgba(0,0,0,0.6);
        }

        #overlay img {
            margin-top: 100px;
        }

        p {
            margin-top: 300px;
            text-align: center;
        }
    </style>
</head>

<body>

    <p>
        <a href="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/1.jpg" title="Afficher l'image originale" id="1"><img src="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/1_min.jpg" alt="Miniature" /></a>
        <a href="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/2.jpg" title="Afficher l'image originale" id="2"><img src="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/2_min.jpg" alt="Miniature" /></a>
        <a href="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/3.jpg" title="Afficher l'image originale" id="3"><img src="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/3_min.jpg" alt="Miniature" /></a>
        <a href="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/4.jpg" title="Afficher l'image originale" id="4"><img src="http://www.sdz-files.com/cours/javascript/part3/chap8/imgs/4_min.jpg" alt="Miniature" /></a>
    </p>

    <div id="overlay"></div>

    <script>

        links = document.getElementsByTagName('a');
        var linksLen = links.length;

        for (var i = 0 ; i < linksLen ; i++) {

            links[i].onclick = function() { // J'utilise le DOM-0, mais vous pouvez très bien utiliser le DOM-2 !
                displayImg(this);           // On appelle notre fonction pour afficher les images
                return false;               // Et on bloque la redirection
            };

        }

        function displayImg(link) {

            var img = new Image(),
                overlay = document.getElementById('overlay');
            var div = document.createElement('div');
            div.id = "div";
            div.onclick = close;
            img.id="img";

            img.onload = function() {
                overlay.innerHTML = '<input type="button" onclick="nextImg();" value ="Prochaine Image"/><br/>';
                div.appendChild(img);
                overlay.appendChild(div);
            };

            img.src = link.href;
            overlay.style.display = 'block';
            overlay.innerHTML = '<span>Chargement en cours...</span>';
            hide = true;
        }

        function close() {
            
            document.getElementById('overlay').style.display = 'none';
            
        };

        function nextImg(){
            var overlay = document.getElementById('overlay');
            var ok = false;
            for (var i = 0; i < linksLen; i++) {
                if(document.getElementById('img').src == links[i]){
                    if(links[i+1] != undefined){
                        displayImg(links[i+1]);
                    }
                    else{
                        displayImg(links[0]);
                    }
                    ok = true;
                }
            }

        }

    </script>

</body>
</html>

Je te met tous le code comme ca tu devrai t'y retrouver, mais je ne suis pas sur que ce soit la façon la plus optimisé du monde

Bonne chance pour la suite.

kevinwolf

27 mars 2015 à 21:04:33

Pas mal du tout!!! Merci bien!

Mais j'ai une question, est-il possible de déplacé le bouton? Je ne trouve pas les lignes de placement, j'en déduis que c'est automatique.

FireCube

27 mars 2015 à 21:20:57

En fait, j'ai mis le bouton au dessus de la div qui contiendra l'image(son id est div), mais toujours dans la div overlay; pour modifier les boutons, cela révèle du css.

Si tu as d'autres problèmes de code, je serai ravi de te venir en aide, mais j'ai plus de mal avec la mise en page, je te la laisse donc avec grande joie

kevinwolf

28 mars 2015 à 21:54:59

En fait, je n'arrive pas à déplacé ce bouton..

Dans mon css, j'ai crée un #overlay div et j'y donne des positions mais ça me déplace l'image "agrandi" donc je comprend rien x)

En fait, mon but est de déplacé le bouton car j'aimerai en mettre un deuxième, le précedant. Et pour ca j'ai besoin de déplacé le premier bouton, car j'ai l'impression du moins peut être, qu'il se met en dessous et que donc je ne le vois pas.

Voila le code du précedant, testé, il fonctionne

function prevImg(){
    var overlay = document.getElementById('overlay');
    var ok = false;
    for (var i = 0; i < linksLen; i++) {
        if(document.getElementById('img').src == links[i]){
            if(links[i-1] != undefined){
                displayImg(links[i-1]);
            }
            else{
                displayImg(links[linksLen-1]);
            }
			ok = true;
        }
    }
}

-
Edité par kevinwolf 28 mars 2015 à 22:30:07

kevinwolf

28 mars 2015 à 22:07:42

J'ai trouvé en fait..

C'était bien sûr un input:

input#next
{
   margin: 40px 0 0 380px;
}

Mais le soucis, est qu'en réalité je n'ai pas de second bouton..

voila ce que j'ai fais. J'ai utlisé le même modèle pour créer le bouton mais, il supprime le premier ou n'enregistre que le second.

function displayImg(link) {
	var img = new Image(),
        overlay = document.getElementById('overlay');
	
    var nav = document.createElement('nav');
    nav.id = "grande_image";
    nav.onclick = close;
		
    img.id="img";

	
	img.onload = function() {
		 overlay.innerHTML = '<input type="button" id ="next" onclick="nextImg();" value ="Prochaine Image"/><br/>';
		 
		 nav.appendChild(img);
         overlay.appendChild(nav);
		 
		 
		 overlay.innerHTML = '<input type="button" id ="prev" onclick="prevImg();" value ="Prochaine Image"/><br/>';
		 nav.appendChild(img);
         overlay.appendChild(nav);
    };
	
    img.src = link.href;
    overlay.style.display = 'block';
    overlay.innerHTML = '<span>Chargement en cours...</span>';
    hide = true;
}

-
Edité par kevinwolf 28 mars 2015 à 23:27:26