Forum

buna,
am incercat sa fac o galerie de imagini, am afisat o imagine mica pe ecran iar cand dau click pe ea apare intr-o dimensiune mai mare iar cu ajutorul unor butoane next si prev sa pot schimba imaginile insa in loc sa se schimbe pe imaginea mare sau in amele se schimba doar in patratul cu imaginea mica.
Ma poate ajuta cineva?

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
  *{
  margin:0px;
  padding:0px;
  background-image: url("backgroundvar.jpg");

}

.column {
float:right;
margin:11px;    

}

.column img {
    opacity: 0.8; 
    
}

.column img:hover {
    opacity: 1;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.container {
    position: relative;
    display: none;
    text-align: center;
}


.closebtn {
    position: absolute;
    top: 10px;
    right: 200px;
    font-size: 35px;
    cursor: pointer;
}
.prev,
.next {
  cursor: pointer;
  position: relative;
  width: auto;
  padding: 16px;
  margin-top: -60px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

</style>
</head>
<body>

<div class="row">
  <div class="column">
         <img src="var1.jpg" width="100px" height="100px" onclick="myFunction(this);">
  </div>
  <div class="column">
         <img src="var2.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
         <img src="var3.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var4.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var5.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var6.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var7.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var8.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var9.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var10.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
    <div class="column">
        <img src="var11.jpg" width="100px" height="100px"  onclick="myFunction(this);">
    </div>
  </div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" width="1100px"  height="500px">
  <div class="caption-container">
    <p id="caption"></p>
     <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
  </div>
<script>
function myFunction(imgs) {
    var expandImg = document.getElementById("expandedImg");
    expandImg.src = imgs.src;
    expandImg.parentElement.style.display = "block";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("column");
  var dots = document.getElementsByClassName("caption");
  var captionText = document.getElementById("caption-container");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

Incearca asa:
1. Sterge linia asta de cod din functia showSlides();

Cod: Selectaţi tot

var slides = document.getElementsByClassName("column");

2. Inlocuieste aceasta parte din cod:

Cod: Selectaţi tot

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

- Cu aceasta:

Cod: Selectaţi tot

var slideIndex = 1;
var slides = document.getElementsByClassName("column");
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
  myFunction(slides[slideIndex-1].querySelector('img'));
}

nu merge nici cu modificarile facute.

Sunt greseli in codul pe care l-ai postat, atat la partea html, cat si javascript.
De exemplu, la html, lipseste un </div> de inchidere in zona "container".
Codul js nu fuctioneaza total daca sunt erori in el. Ca sa verifici codul javascript de erori, vezi in Consola in browser (F12).

Forum

Corectare afisare imagine marita in galerie imagini

Corectare afisare imagine marita in galerie imagini

Subiecte similare