Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Java][PHP]Wyświetlanie obrazka w osobnym DIVie
Forum PHP.pl > Forum > Przedszkole
david8213
11.03.2020, 12:17:11
Jak to zrobić w prosty sposób zeby po kliknięci na każdy Link otwierał się w osobnym DIV obrazek [jak zrobić dodatkowo żeby zamiast linka Kliknij1 był obrazek <img> nie działa]
Coś mi nie wychodzi, otwiera mi ciągle ten sam obrazek
Zeby nie rozbudowywać funkcji bo mam tych obrazków ponad 20
Może jest jakoś prostrzy sposób?

Mam 20 zdjęć i chcę żeby wyświetlane były na stronie a po kliknięciu na każde otwierało mi zdęcie w nowym przyciemnionym DIVie

[XML] pobierz, plaintext 
  1. <style>
  2. .dropdown {
  3.   float: left;
  4.   overflow: hidden;
  5.   cursor: pointer;
  6. }
  7.  
  8. .dropdown-content {
  9.    display: none;
  10.    background-color: #f9f9f9;
  11.    min-width: 160px;
  12.    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  13.    position: fixed;
  14.    margin-top: 3.0em;
  15.    z-index: 2;
  16. }
  17.  
  18. .dropdown-content a {
  19.   color: black;
  20.   padding: 12px 16px;
  21.   text-decoration: none;
  22.   display: block;
  23. }
  24.  
  25. a:hover, .dropdown:hover {
  26.   background-color: #acc;
  27.   color: black;
  28.   cursor: pointer;
  29. }
  30.  
  31. .show {
  32. display: block;
  33. }
  34.  
  35. </style>
  36. </head>
  37.  
  38.  
  39.  	 <a onclick="myFunction()" class="dropbtn">kliknij1 </a>
  40.  		 <div id="myDropdown" class="dropdown-content">
  41.   			  <img src="10.jpg" width="300">
  42.   			  <a href="#" class="tablinks">[zamknij]</a>
  43. 		</div>
  44.  
  45.  
  46.          <a onclick="myFunction()" class="dropbtn"> kliknij2</a>
  47.  		 <div id="myDropdown" class="dropdown-content">
  48.   			  <img src="11.jpg" width="300">
  49.   			  <a href="#" class="tablinks">[zamknij]</a>
  50. 		</div>
  51.  
  52.          <a onclick="myFunction()" class="dropbtn"> kliknij3</a>
  53.  		 <div id="myDropdown" class="dropdown-content">
  54.   			  <img src="12.jpg" width="300">
  55.   			  <a href="#" class="tablinks">[zamknij]</a>
  56. 		</div>
  57.  
  58. <script>
  59.  
  60. function myFunction() {
  61.   document.getElementById("myDropdown").classList.toggle("show");
  62. }
  63.  
  64. window.onclick = function(event) {
  65.   if (!event.target.matches('.dropbtn')) {
  66.     var dropdowns = document.getElementsByClassName("dropdown-content");
  67.     var i;
  68.     for (i = 0; i < dropdowns.length; i++) {
  69.       var openDropdown = dropdowns[i];
  70.       if (openDropdown.classList.contains('show')) {
  71.         openDropdown.classList.remove('show');
  72.       }
  73.     }
  74.   }
  75. }
  76. </script>
[XML] pobierz, plaintext


Zrobiłem jeszcze jak ponzej ale czy da się to jakoś uprościc dla wielu obrazków?

[XML] pobierz, plaintext 
  1.  
  2. <html>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <style>
  5. .w3-container,.w3-panel{padding:0.01em 16px}
  6. .w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
  7. .w3-display-topright{position:absolute;right:0;top:0}
  8. .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
  9. .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
  10. </style>
  11.  
  12. <body>
  13.  
  14. <div class="w3-container">
  15.  
  16.   <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black"><img src="01.jpg" width="100"></button>
  17.   <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black"><img src="02.jpg" width="100"></button>
  18.   <div id="id01" class="w3-modal">
  19.     <div class="w3-modal-content">
  20.       <div class="w3-container">
  21.         <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
  22.         <p><img src="01.jpg" width="100%"></p>
  23.         <p></p>
  24.       </div>
  25.     </div>
  26.   </div>
  27.  
  28.  <div id="id02" class="w3-modal">
  29.     <div class="w3-modal-content">
  30.       <div class="w3-container">
  31.         <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">&times;</span>
  32. 	 <p><img src="02.jpg" width="100%"></p>
  33.       </div>
  34.     </div>
  35.   </div>
  36. </div>
  37.  
  38. </body>
  39. </html>
  40.  
[XML] pobierz, plaintext
trueblue
11.03.2020, 13:40:41
https://www.google.com/search?q=lightbox+css
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.