Discussion :

[Leguman31000]

Bonjour,

J'ai sur mon site une petite galerie image lightbox.
J'ai pour cet exemple 10 photos, mais je souhaite que 5 de ces 10 photos apparaissent et de façon aléatoire a chaque chargement de page.
Quelqu'un pourrait me filer un petit coup de main ?

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
28
29
30
31
32
33
34
35
36
37
38
39
<div class="thumbnail">
  <img data-img="images/inauguration/1.jpg" src="images/inauguration/1.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/2.jpg" src="images/inauguration/2.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/3.jpg" src="images/inauguration/3.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/4.jpg" src="images/inauguration/4.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/5.jpg" src="images/inauguration/5.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/6.jpg" src="images/inauguration/6.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/7.jpg" src="images/inauguration/7.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/8.jpg" src="images/inauguration/8.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/9.jpg" src="images/inauguration/9.jpg"/>
</div>
 
<div class="thumbnail">
  <img data-img="images/inauguration/10.jpg" src="images/inauguration/10.jpg"/>
</div>

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
49
	<script>
      // Nous voila dans le JS, que je vais essayer de le garder le plus clair et concis possible.
 
$(function(){
 
  // C'est ici que nous definissons les images qui doivent ouvrir une lightbox au click.
  // Pour nous, toutes les images dans les élément ovec la classe "thumbnail"
  $(".thumbnail img").click(function(){
    // Récupérationdu body, pour la suite
    var $body = $('body');
    // L'image qui as ete ouverte
    $thumbnail = $(this);
 
    // Nous créons ici nos elements
    var $blackout = $("<div id='blackout'>").css("display", "none");
 
    // La source de notre image provient bien du "data-img" de la thumbnail
    var $img = $("<img>").attr("src", $thumbnail.data("img"));
    $blackout.append($img);
 
    // Nous créons le titre si l'attribut alt existe
    if($(this).attr("alt")){
      var $title = $("<div class='title'>"+ $thumbnail.attr("alt") +"</div>");
      $blackout.append($title);
    }
 
    // Ce block ne s'execute pas maintenant, mais au prochain click sur notre "blackout". Il se lit comme suit :
    // Au clic sur le fond...
    $blackout.click(function(){
      // On fait disparaitre progressivement la lightbox...
      $blackout.fadeOut(function(){
        // Puis on la supprime.
        $blackout.remove();
      })
    });
 
    // On ajoute notre lightbox au body.
    $body.append($blackout);
    //Et enfin nous la faisons apparaitre progressivement.
    $blackout.fadeIn();
 
    // Ces trois petites lignes permettent de centrer l'image en hauteur
    if($img.height() < $blackout.height()){
      $img.css("marginTop", ($blackout.height() - $img.height()) / 2);
    }
 
  })
})
    </script>

[Doksuri]

partant du principe que ta class CSS thumbnail soit en display:none;

Code css :

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

1
2
3
.thumbnail {
  display:none;
}

Code javascript :

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

1
2
3
4
5
6
let imgs = [].slice.call(document.getElementsByClassName('thumbnail'));
for(let i=0; i<5; i++) {
	let r = Math.floor(Math.random() * imgs.length);
  imgs[r].style.display='block';
  imgs.splice(r, 1);
}

[Leguman31000]

Et bien, je ne m’attendais pas du tout à une réponse rapide et fonctionnelle.
C'est vraiment super sympa... mille merci.

[Leguman31000]

Ah je suis un idiot.... en faite y'a un tout petit problème...
La fonction pour ouvrir les vignettes ne marche plus...

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
49
50
51
52
53
54
55
56
57
 
	<script>
      // Nous voila dans le JS, que je vais essayer de le garder le plus clair et concis possible.
 
$(function(){
 
  // C'est ici que nous definissons les images qui doivent ouvrir une lightbox au click.
  // Pour nous, toutes les images dans les élément ovec la classe "thumbnail"
  $(".thumbnail img").click(function(){
    // Récupérationdu body, pour la suite
    var $body = $('body');
    // L'image qui as ete ouverte
    $thumbnail = $(this);
 
    // Nous créons ici nos elements
    var $blackout = $("<div id='blackout'>").css("display", "none");
 
    // La source de notre image provient bien du "data-img" de la thumbnail
    var $img = $("<img>").attr("src", $thumbnail.data("img"));
    $blackout.append($img);
 
    // Nous créons le titre si l'attribut alt existe
    if($(this).attr("alt")){
      var $title = $("<div class='title'>"+ $thumbnail.attr("alt") +"</div>");
      $blackout.append($title);
    }
 
    // Ce block ne s'execute pas maintenant, mais au prochain click sur notre "blackout". Il se lit comme suit :
    // Au clic sur le fond...
    $blackout.click(function(){
      // On fait disparaitre progressivement la lightbox...
      $blackout.fadeOut(function(){
        // Puis on la supprime.
        $blackout.remove();
      })
    });
 
    // On ajoute notre lightbox au body.
    $body.append($blackout);
    //Et enfin nous la faisons apparaitre progressivement.
    $blackout.fadeIn();
 
    // Ces trois petites lignes permettent de centrer l'image en hauteur
    if($img.height() < $blackout.height()){
      $img.css("marginTop", ($blackout.height() - $img.height()) / 2);
    }
 
  })
})
 
let imgs = [].slice.call(document.getElementsByClassName('thumbnail2'));
for(let i=0; i<5; i++) {
	let r = Math.floor(Math.random() * imgs.length);
  imgs[r].style.display='block';
  imgs.splice(r, 1);
}
    </script>

EDIT : C'est bon l'idiot du village a compris... j'ai modifier le thumbnail en thumbnail2, il fallait que je modifie mon code JS pour l'ouverture....