Discussion :

[pommefrite]

Bonjour,

Je me tourne vers vous car j'ai un petit problème que je n'arrive pas a résoudre

J'ai créer une petite galerie, lorsque l'on clique sur une miniature, l'image s'affiche en grand a coté. (s'en est encore a un stade embryonnaire.)
Le Front est écrit avec AngularJs, c’était l'occasion pour tester Jhipster (framework Angular/Spring).

J'ai écris une version fonctionnel, mais non factorisé, elle fonctionne correctement.
Mais devoir écrire de l'HTML a chaque fois qu'une nouvelle photo est uploadé sur le serveur n'est pas imaginable. ^^
Lorsque je factorisé avec ng-repeat et un tableau de path, "getElementsByTagName" en fait plus son boulot.
Plutôt que d'afficher l'image le code me redirige complètement vers une page avec le chemin de l'image comme URL.

Un peu de code parle plus que de longue explications.

Résultat code non factorisé:

Résultat code factorisé après avoir cliqué sur l'image:

HTML Non factorisé : (Le liens images ne seront en réalité pas dans swagger dans l'exemple ci-dessous c'est juste pour tester.)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div ng-cloak>
    <div class="row">
        <div class="col-md-12">
            <h1>Galeries</h1>
            <p class="well col-md-2" style="max-height: 500px;overflow-y: scroll">              <!--Permet d'afficher les vignettes des images-->
 
                <a class="thumbnail" href="../../swagger-ui/images/gallery/1.jpg"
                   title="Afficher l'image originale"><img
                    src="../../swagger-ui/images/gallery/1.jpg" alt="Miniature"/></a>
                <a class="thumbnail" href="../../swagger-ui/images/gallery/2.jpg"
                   title="Afficher l'image originale"><img
                    src="../../swagger-ui/images/gallery/2.jpg" alt="Miniature"/></a>
                <a class="thumbnail" href="../../swagger-ui/images/gallery/3.jpg"
                   title="Afficher l'image originale"><img
                    src="../../swagger-ui/images/gallery/3.jpg" alt="Miniature"/></a>
                <a class="thumbnail" href="../../swagger-ui/images/gallery/4.jpg"
                   title="Afficher l'image originale">
                    <img src="../../swagger-ui/images/gallery/4.jpg" alt="Miniature"/></a>
                <a class="thumbnail" href="../../swagger-ui/images/gallery/5.jpg"
                   title="Afficher l'image originale">
                    <img src="../../swagger-ui/images/gallery/5.jpg" alt="Miniature"/></a>
            </p>
            <!--Permet d'afficher les images-->
            <div class=" well col-md-10 thumbnail" id="overlay"></div>
        </div>
    </div>
</div>

HTML factorisé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ng-cloak>
    <div class="row">
        <div class="col-md-12">
            <h1>Galeries</h1>
            <p  class="well col-md-2" style="max-height: 500px;overflow-y: scroll">
                <a ng-repeat="path in vm.imgNames" class="thumbnail" href="../../swagger-ui/images/gallery/{{path}}.jpg"
                   title="Afficher l'image originale"><img
                    src="../../swagger-ui/images/gallery/{{path}}.jpg" alt="Miniature"/></a>
            </p>
            <!--Permet d'afficher les images-->
            <div class=" well col-md-10 thumbnail" id="overlay"></div>
        </div>
    </div>
</div>

Code Js : (Il est évidant que les paths seront envoyé par le back et non hardcodé dans un tableau. ^^)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function () {
    'use strict';
 
    angular
        .module('myApp')
        .controller('GalleryController', GalleryController)
 
    GalleryController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];
 
    function GalleryController($scope, Principal, LoginService, $state) {
        var vm = this;
        var links = document.getElementsByTagName('a'),
            linksLen = links.length;
        vm.imgNames = [1, 2, 3, 4, 5, 6]; //Sera remplacé par un tableau contenant les paths des images.
 
        for (var i = 0; i < linksLen; i++) {
 
            links[i].addEventListener('click', function (e) {
                e.preventDefault();
 
                displayImg(e.currentTarget);
            });
 
        }
 
        function displayImg(link) {
 
            var img = new Image();
            img.style.marginTop = "10%";
            img.style.height = "100%";
            img.style.marginTop = "0%";
 
            img.addEventListener('load', function () {
                overlay.innerHTML = '';
                overlay.style.width;
 
                overlay.appendChild(img);
 
            });
            img.src = link.href;
            overlay.style.height = "500px";
            // overlay.style.position ="fixed";
 
            '<span>Chargement en cours...</span>';
        }
    }
})
();

Il doit donc y avoir une subtilité qui m'échappe.

je ne suis pas encore familier avec le front, merci de votre aide.