Bonjour, je viens vers vous car j'ai un problème.

En gros j'ai des miniatures côtés à côtes pour chaque jeux quand je clique sur une des miniatures, cela affiche un prévisuel de l'image choisi.

Et j'aimerais que lorsque je clique sur le prévisuel, cela m'affiche par dessus la page une pop up avec l'image en grand et une croix ou même cliquer à côté pour "quitter" l'image en restant toujours sur la même page.

A peu près comme ça :

Sauf que j'y arrive pas

Voila donc mon code partie HTML de la partie concernée : 

<!-- Image gallerie -->
    <div class="gallery" ng-controller="GalleryController as gallery" ng-show="product.images.length">
        <img ng-src="{{product.image[gallery.current]}}" />
        <ul class="clearfix">
            <li class="small-image img-thumbnail" ng-repeat="image in product.images track by $index" ng-click="gallery.setCurrent($index)">
                <img style="width:50px; height: 50px" ng-src="{{image}}" />
            </li>
                <a href="{{product.images[gallery.current]}}">
                <img src="{{product.images[gallery.current]}}" alt="" />
                </a>
        </ul>
    </div>

Et la partie Javascript concernez pour les images (une petite partie) :

 var gems = [{
          name: 'Battlefield 1',
          description: "Dans Battlefield 1, vous découvrirez ce que nous appelons des récits de guerre. Ce sont des aventures personnelles axées sur différents protagonistes, chacun ayant son histoire et ses compétences uniques. Ces personnages participent à la guerre, mais les histoires racontées dans Battlefield 1 sont personnelles. Elles se concentrent plus sur les gens que sur l'histoire des batailles.",
          site: "images/gamekult.gif",
          site2: "images/logojvc.jpg",
          price: 60,
          price2: 35,
          price3: 30,
          avis: "Cet épisode est - sans l’ombre d’un doute - le meilleur de la série",
          avis2: "Un FPS solo et multi venu gommer les errances de la saga iconique",
          note: "images/9.png",
          note2: "images/8,5.png",
          lien: 'https://www.gamekult.com/jeux/battlefield-1-3050692319/test.html',
          lien2: "http://www.jeuxvideo.com/test/552927/battlefield-1-la-pepite-des-fps-de-fin-d-annee.htm",
          bouton: "https://jeux-video.fnac.com/a9689299/Battlefield-1-PC-Jeu-PC?ectrans=1&oref=9a4574b9-8158-cfe4-5737-06655a362de0",
          bouton2: "https://jeux-video.fnac.com/a9689297/Battlefield-1-PS4-Jeu-PlayStation-4?ectrans=1&oref=e8eb1f12-c0f1-e64b-9aa4-76d86a76af1d",
          bouton3: "https://jeux-video.fnac.com/a9689298/Battlefield-1-Xbox-One-Jeu-Xbox-One?ectrans=1&oref=35b1e1ac-5491-3af3-e1d0-0196cfeec058",
          images: [
              "images/bf1.jpg",
              "images/bf1-2.jpg",
              "images/bf1-3.jpg",
          ],
          reviews: [{
              stars: 5,
              body: "Très bon jeu ! J'ai adoré !",
              author: "joe@example.org",
              createdOn: 1397490980837
          }, {
              stars: 4,
              body: "Bon jeu dans l'ensemble, si on soustrait les quelques rares bug présent dans le jeu.",
              author: "tim@example.org",
              createdOn: 1397490980837
          }]
      },
      {
          name: 'Call of Duty : Infinite Warfare',
          description: "La campagne retourne dans l'univers militaire ultra-réaliste caractéristique des origines de la série, tout en proposant un récit d'anticipation inédit dans la saga Call of Duty. Le joueur est entraîné dans un périple au style classique dans un contexte de guerre à grande échelle, se déroulant dans un futur où le conflit humain s'est étendu dans tout le système solaire.",
          site: "images/gamekult.gif",
          site2: "images/logojvc.jpg",
          price: 22.90,
          price2: 20,
          price3: 15,
          avis: "En regardant vers les étoiles, Activision et Infinity Ward voulaient apporter un peu plus de souffle et de nouveautés à leur tête de gondole.",
          avis2: "Avec un excellent mode Zombies mais un multijoueur peu inspiré, Call of Duty Infinite Warfare est un FPS solide mais qui manque cruellement d'âme.",
          note: "images/5.png",
          note2: "images/3,5.png",
          lien: 'https://www.gamekult.com/jeux/call-of-duty-infinite-warfare-3050686225/test.html',
          lien2: "http://www.jeuxvideo.com/test/562499/call-of-duty-infinite-warfare-le-changement-c-est-presque-maintenant.htm",
          bouton: "https://jeux-video.fnac.com/a9677956/Call-of-Duty-Infinite-Warfare-PC-Jeu-PC",
          bouton2: "https://jeux-video.fnac.com/mp29802884/Call-Of-Duty-Infinite-Warfare-PS4?ectrans=1&oref=9431824f-254e-0443-f366-db0de195b35f",
          bouton3: "https://www.amazon.fr/dp/B01F2AAC3C/ref=asc_df_B01F2AAC3C46744263/",
          images: [
              "images/cod.jpg",
              "images/cod2.jpg",
              "images/cod3.jpg",
          ],
          reviews: [{
              stars: 3,
              body: "Massacre de la série call of duty encore une fois, je regrette l'époque des Modern Warfare",
              author: "JimmyDean@example.org",
              createdOn: 1397490980837
          }, {
              stars: 2,
              body: "Payé le jeu une blinde. Et devoir encore payé une fois en jeu pour du nouveau contenu. Sont-ils sèrieux aux moins ?",
              author: "gemsRock@example.org",
              createdOn: 1397490980837
          }]
      },

Y'à plus de sections normalement, j'ai pas tout mis.

En espérant trouvez de l'aide ici

Merci

Cordialement, damienien

Hello,

Regarde peut etre de ce coté: https://limonte.github.io/sweetalert2/

Krogoth a écrit:

Hello,

Regarde peut etre de ce coté: https://limonte.github.io/sweetalert2/

Ok merci je vais voirça 

AbcAbc6 a écrit:

Bonjour, je déplace dans le forum JavaScript. Attention en html les attributs ng-* ne sont pas valide tu dois utiliser les attributs data-* .

AbcAbc6 a écrit:

Bonjour, je déplace dans le forum JavaScript. Attention en html les attributs ng-* ne sont pas valide tu dois utiliser les attributs data-* .

Si je ne dis pas de betise le ng-* c'est du angularjs https://angularjs.org/ (mais ca n'en reste pas plus valide)

Je viens de regarder SweetAlert 2, superbe librairie, mais je suis toujours bloqué, j'ai bien fais le :

function test() {
swal({
  title: 'Sweet!',
  text: 'Modal with a custom image.',
  imageUrl: '{{product.images[gallery.current]}}',
  imageWidth: 400,
  imageHeight: 200,
  imageAlt: 'Custom image',
  animation: false
})
};

Mais cela ne m'affiche pas d'images. J'ai tester avec "imageAlt" et "imageClass" mais ça ne fonctionne pas, l'image ne veut pas s'afficher :/
ça ne m'affiche que la popup avec le texte

-
Edité par Damienien 21 novembre 2017 à 11:42:10

Hello, 

C'est plutôt un popin que tu cherches à faire non ? 

J'ai un popin simplement en css, si ça t'intéresse : 

Le CSS

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(255,255,255,0.9);
    overflow: auto;
    visibility: hidden;
    text-align: center;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.smart-popin:target
{
	opacity: 1;
	visibility: visible;
	z-index: 3;
}
.smart-popin .sp-body 
{
    padding: 2em;
    width: 40%;
    min-width: 300px;
    margin: 0 auto;
}
.smart-popin .sp-table {
    display: table;
    height: 100%;
    width: 100%;
}
.smart-popin .sp-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}
.smart-popin .sp-back
{
	position: fixed;
	left: 0; right: 0;
	top: 0; bottom: 0;
	display: block;
}
.smart-popin .sp-close
{
	position: absolute; 
	top: 0;
	right: 0;

	width: 36px;
	height: 36px;

	text-align: center;
	line-height: 36px;
	font-size: 1.6em;
	font-size: 900;
	text-decoration: none;
}

puis le HTML 

<a href="#exemple" title="exemple"> Exemple </a>
 <div class="smart-popin" id="exemple">
        <div class="sp-table">
          <div class="sp-cell">
            <div class="sp-body">
            <p>Contenu popin</p>
            <!-- Quitter le popin -->
            <a href="#" class="sp-back"><p>x</p></a>
           </div>
          </div>
        </div>
     </div>

Slt, regarde de ce côté, je pense que ça correspond à ce que tu souhaites faire!

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img

-
Edité par Maestro974 21 novembre 2017 à 14:57:41