Dev Faq
0
votes

Comment corriger: galerie d'images, image avec superposition non ouverture de la lumière

Je veux que les images aient un effet de survolte qui montre une superposition avec une icône (disons l'icône de zoom), mais quand elle le montre, il n'ouvre pas la sélection. Toute aide sur ce que je fais mal serait grandement appréciée.

Voici une section du code que j'ai essayé d'utiliser pour la superposition: p> 

.column {
  float: left;
  width: 25%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.column:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

1 commentaires

Le code manque la fermeture pour la superposition div.

3 Réponses :

0
votes

Il suffit d'ajouter OnClick Attribut sur Superposition DIV 

<div class="row">

0 commentaires
0
votes

au lieu de donner onclick = "openmodal (); CurrentSlide (1)" " code> fonction à img code> donner à DIV colonne em> 

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column"  onclick="openModal();currentSlide(1)">
    <img src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%" class="hover-shadow cursor">
    <div class="overlay">
    <div class="text">Hello World</div>
  </div>
  </div>
  <div class="column" onclick="openModal();currentSlide(2)">
    <img src="https://source.unsplash.com/user/mkmueller/likes/603x402" style="width:100%"  class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="https://source.unsplash.com/user/mkmueller/likes/606x404" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column" onclick="openModal();currentSlide(4)">
    <img src="https://source.unsplash.com/user/mkmueller/likes/609x406" style="width:100%"  class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/603x402" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/606x404" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://source.unsplash.com/user/mkmueller/likes/609x406" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/600x400" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/603x402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/606x404" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="https://source.unsplash.com/user/mkmueller/likes/609x406" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

0 commentaires
0
votes

Comme vous pouvez le constater que la superposition cachet complètement le img complètement et bloquant donc les événements qui peuvent transmettre à eux. Si votre intention est de montrer la superposition, mais la superposition elle-même n'effectue aucune action, puis définissez Pointeur-Events: Aucun à votre superposition CSS et vos événements de clic seraient transmis et le modal serait déclenché ouvert.

Fiddle modifié ici -> https://jsfiddle.net/marudhupandiyang/z1prvsne/3/ < / a>

0 commentaires

Articles qui pourrait vous intéresser :

 Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO