Bootstrap et mise en forme list

Question

millybou

19 Feb 2019 à 12:32

Bonjour à tous, Smiley ravi

(Je suis débutante en code) Smiley biggol

Je souhaite intégrer une galerie d'images à mon site.
Du javascript permet de renvoyer le clic d'une miniature vers une image zoomée.
Le script que j'ai trouvé se fait sur une liste :
- une première liste avec les images "zoom" (avec certaines en cache)
- une seconde liste juste en dessous avec les images "miniature" (toutes visibles)

Je n'ai pas eu de problèmes de mise en forme pour la première liste (image zoom) car toute la liste <ul> est dans une <div class="col-8">, mais je galère avec la seconde (miniatures). Je souhaite utiliser bootstrap4 pour la mise en forme de ma liste de miniature sur deux colonnes. (class="col-6").

Mon problème : les images restent les unes en dessous des autres au lieu de se mettre sur deux colonnes.

J'ai déjà intégré ce code à mon CSS :

li{ 
  padding: 0; 
  margin: 0;
  list-style: none;
}

Ma feuille de style CSS est avant la feuille CSS de bootstrap dans l'HTML.
Si j'ajoute

display:inline;

au CSS de la balise <li> je perd la mise en forme dans les colonnes.
Si j'ajoute

display:block

au CSS de la balise <li> les images restent dans la première colonne. (donc ça ne résout pas le problème) Smiley decu

upload/1550575915-74536-capture-pour-alsa-1.jpg

J'ai mis dans l'HTML Smiley confus

:

<div class="container">
<div class="row bg-warning">
<ul>
<li class="col-6">mon image</li>
<li class="col-6">mon image</li>
</ul>
</div>
</div>

merci d'avance pour votre aide ! Smiley ravi

Modifié par millybou (19 Feb 2019 - 12:32)

Depassage

19 Feb 2019 à 14:01

Salut,

tes col-6 doivent toujours être l'enfant direct de row sinon ça ne peut pas fonctionner. Ceci car les row de bootstrap utilisent flexbox et donc les éléments flexibles qui correspondent aux colonnes sont obligatoirement le premier enfant de row.

Ici, tu peux utiliser directement des <div class="col-6"></div> plutôt que de faire une liste.
Modifié par Depassage (19 Feb 2019 - 14:02)

millybou

19 Feb 2019 à 14:17

Super ! ça marche ! Merci beaucoup ! Smiley biggrin

J'ai déplacé les ID dans les <div> pour que le JavaScript reconnaisse encore les images.

Par contre quand je clique sur une image "miniature" toute la mise en forme disparaît.
(l'image "zoom" change bien par contre). Après le clic, je souhaite que les miniatures restent des miniatures. (pas que les miniatures prennent toute la largeur page) Smiley confus

upload/1550583749-74536-capture-pour-alsa-2.jpg

Est-ce que c'est à cause du JavaScript ? Dois-je ouvrir un autre sujet ?

// JavaScript Document
var btTab = document.querySelectorAll('.miniClic') 
var lie = document.querySelectorAll('#zoom li') ;
console.log(lie);
function init(){ 
  for(var i=0; i<btTab.length; i++){
     btTab[i].className = "miniClic";
     lie[i].className = "cache";
  }
}
function photo(){

 init();
  this.className = "miniClic actif";
  var rang = this.id;
  lie[rang-1].className = "visible";
}
for(var i=0; i<btTab.length; i++){
 btTab[i].addEventListener('click',photo,false);
}

Modifié par millybou (19 Feb 2019 - 15:02)

millybou

10 Apr 2019 à 14:54

Le problème a été résolu en prenant un autre code javascript :

if (typeof g !== 'undefined') {
  // Désormais, on sait que toto est bien
  // défini et on peut poursuivre.
}

// JavaScript Document
function miniGalerie()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change l'attribut alt de l'image en le remplaçant par title du lien
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}

// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = miniGalerie;

Sujet clos

Questions générales et questions de débutants

Bootstrap et mise en forme list