Discussion :

[Tigrou 74]

Bonjour à tous,

Je viens d'installer la galerie photos "S GALLERY", et je me demande s'il existe un moyen de rajouter du texte (des légendes) à côté des images lorsqu'elles sont en plein écran. En sachant que le width et le height sont à 100% pour le responsive design.

Mes connaissances en Javascript sont très limitées, du coup je ne sais pas si je dois mettre un <span> ou un <p> dans le HTML qui apparaitrait juste à ce moment là (je ne sais pas encore comment!), où si je peux mettre le nez dans le script pour modifier carrément la galerie.

Et même si vous allez me dire qu'il existe des galeries qui possèdent déjà des zones de texte, je voudrais quand-même tenter celle-ci si la solution est simple.

MERCI d'avance

[SpaceFrog]

sans voir un seul bout de code ???

[Tigrou 74]

Je ne sais même pas quel partie du code mettre, donc je tente le HTML pour commencer. Mais il vous faut peut-être plutôt le javascript de la fonction "fullscreen ..."?

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
40
41
42
43
44
45
46
47
<div class="demo-wrapper">
 
  <!--// Gallery Markup: A container that the plugin is called upon, and two lists for the images (use images with same aspect ratio) //-->
  <div id="gallery-container">
 
    <ul class="items--small">
      <li class="item"><a href="#"><img src="images/small/angel_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/destructuration_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/femme_vegetale_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/fire_face_1_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/fire_face_2_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/gaga_robot_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/portrait_decoupe_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/tiger_woman_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/trois_femmes_s2.jpg" alt="" /></a></li>
      <li class="item"><a href="#"><img src="images/small/un_reve_s2.jpg" alt="" /></a></li>
    </ul>
    <ul class="items--big">
      <li class="item--big"><a href="#"><img src="images/big/angel2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/destructuration2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/femme_vegetale2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/fire_face_12.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/fire_face_22.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/gaga_robot2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/portrait_decoupe2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/tiger_woman2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/trois_femmes2.jpg" alt="" /></a></li>
      <li class="item--big"><a href="#"><img src="images/big/un_reve2.jpg" alt="" /></a></li>
    </ul>
    <div class="controls">
      <span class="control icon-arrow-left" data-direction="previous"></span>
      <span class="control icon-arrow-right" data-direction="next"></span>
      <span class="grid icon-grid"></span>
      <span class="fs-toggle icon-fullscreen"></span>
    </div>
 
 
  <script src="js/jquery-1.9.0.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/scripts.js"></script>
  <script>
    $(document).ready(function(){
     $('#gallery-container').sGallery({
        fullScreenEnabled: true
      });
    });
  </script>

[SpaceFrog]

Commence par explorer mes possibilités d'ajouter du texte dans les li ...

Code html :

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

1
2
3
4
5
6
<li class="item">
   <a href="#">
      <img src="images/small/angel_s2.jpg" alt="" />
      <span>légende</span>
   </a>
</li>

puis avec css positionne le span ...

[Tigrou 74]

Merci beaucoup

Je vais essayer de gérer ça avec une classe pour pouvoir faire apparaitre la légende uniquement en mode fullscreen.

[Tigrou 74]

Salut SpaceFrog.

Pour des raisons techniques, je suis obligée de laisser tomber cette galerie photo dans mon site. C'est con, parce que je m'étais bien galéré à la mettre en place! Mais j’essaierai quand-même de rajouter ces fameuses légendes dès que j'aurai le temps, car ça me sera bien utile un jour.

En tout cas, un grand Merci.