onClick anchor tag a current div display using jquery





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







2















I'm working on Image gallery here I want onClick anchor tag current image display in .gallery-container is not working. Previously on image img click, I got the output .gallery-column img.



$('.gallery-column img').on('click', function(){
var expandImg = document.getElementById('expandedImg');
expandImg.src = this.src;
expandImg.parentElement.style.display = "block";
var imageCaption = $(this).next("div").html();
$("#expandedImgCaption").html(imageCaption);
});


This code is working fine. Now I have added anchor it is not working.
I have tried but unable to achieve.



Can anyone suggest me?






$(document).ready(function() {
var carouselImg = document.getElementsByClassName('carousel-img');
$('a.post-carousel').on('click', function() {
var expandImg = document.getElementById('expandedImg');
var carouselImg = document.getElementsByClassName('carousel-img');
expandImg.src = carouselImg.src;

expandImg.parentElement.style.display = "block";
var imageCaption = $(this).next("div").html();
$("#expandedImgCaption").html(imageCaption);
});
});

* {
box-sizing: border-box;
}

.gallery-wrap {
width: 50%;
height: 1066px;
margin: 0 auto;
display: flex;
}

.gallery-row {
width: 52%;
max-height: 497px;
}

.gallery-column {
position: relative;
padding: 10px;
}

.img-caption {
position: absolute;
bottom: 10%;
}

.gallery-column img {
width: 100%;
opacity: 0.8;
cursor: pointer;
}

.gallery-column img:hover {
opacity: 1;
}

.gallery-container {
position: relative;
width: 90%;
height: 500px;
}

#expandedImg {
width: 100%;
height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="gallery-wrap">

<div class="gallery-container" style="display: block;">
<a href="#" class="post-carousel">
<img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
<div class="img-caption">
<h3>Still more than 2 Millions+ people using</h3>
</div>
</a>
</div>

<div class="gallery-row">
<div class="gallery-column">
<a href="#" class="post-carousel">
<img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
<div class="img-caption">
<h3>Still more than 2 Millions+ people using</h3>
</div>
</a>
</div>
<div class="gallery-column">
<a href="#" class="post-carousel">
<img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
<div class="img-caption">
<h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
</div>
</a>
</div>
<div class="gallery-column">
<a href="#" class="post-carousel">
<img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
<div class="img-caption">
<h3>sit amet, consectetur adipiscing elit. Donec</h3>
</div>
</a>
</div>
<div class="gallery-column">
<a href="#" class="post-carousel">
<img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
<div class="img-caption">
<h3>nsectetur adipiscing elit. Donec</h3>
</div>
</a>
</div>

</div>
</div>












share|improve this question































    2















    I'm working on Image gallery here I want onClick anchor tag current image display in .gallery-container is not working. Previously on image img click, I got the output .gallery-column img.



    $('.gallery-column img').on('click', function(){
    var expandImg = document.getElementById('expandedImg');
    expandImg.src = this.src;
    expandImg.parentElement.style.display = "block";
    var imageCaption = $(this).next("div").html();
    $("#expandedImgCaption").html(imageCaption);
    });


    This code is working fine. Now I have added anchor it is not working.
    I have tried but unable to achieve.



    Can anyone suggest me?






    $(document).ready(function() {
    var carouselImg = document.getElementsByClassName('carousel-img');
    $('a.post-carousel').on('click', function() {
    var expandImg = document.getElementById('expandedImg');
    var carouselImg = document.getElementsByClassName('carousel-img');
    expandImg.src = carouselImg.src;

    expandImg.parentElement.style.display = "block";
    var imageCaption = $(this).next("div").html();
    $("#expandedImgCaption").html(imageCaption);
    });
    });

    * {
    box-sizing: border-box;
    }

    .gallery-wrap {
    width: 50%;
    height: 1066px;
    margin: 0 auto;
    display: flex;
    }

    .gallery-row {
    width: 52%;
    max-height: 497px;
    }

    .gallery-column {
    position: relative;
    padding: 10px;
    }

    .img-caption {
    position: absolute;
    bottom: 10%;
    }

    .gallery-column img {
    width: 100%;
    opacity: 0.8;
    cursor: pointer;
    }

    .gallery-column img:hover {
    opacity: 1;
    }

    .gallery-container {
    position: relative;
    width: 90%;
    height: 500px;
    }

    #expandedImg {
    width: 100%;
    height: 100%;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <div class="gallery-wrap">

    <div class="gallery-container" style="display: block;">
    <a href="#" class="post-carousel">
    <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
    <div class="img-caption">
    <h3>Still more than 2 Millions+ people using</h3>
    </div>
    </a>
    </div>

    <div class="gallery-row">
    <div class="gallery-column">
    <a href="#" class="post-carousel">
    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
    <div class="img-caption">
    <h3>Still more than 2 Millions+ people using</h3>
    </div>
    </a>
    </div>
    <div class="gallery-column">
    <a href="#" class="post-carousel">
    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
    <div class="img-caption">
    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
    </div>
    </a>
    </div>
    <div class="gallery-column">
    <a href="#" class="post-carousel">
    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
    <div class="img-caption">
    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
    </div>
    </a>
    </div>
    <div class="gallery-column">
    <a href="#" class="post-carousel">
    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
    <div class="img-caption">
    <h3>nsectetur adipiscing elit. Donec</h3>
    </div>
    </a>
    </div>

    </div>
    </div>












    share|improve this question



























      2












      2








      2








      I'm working on Image gallery here I want onClick anchor tag current image display in .gallery-container is not working. Previously on image img click, I got the output .gallery-column img.



      $('.gallery-column img').on('click', function(){
      var expandImg = document.getElementById('expandedImg');
      expandImg.src = this.src;
      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });


      This code is working fine. Now I have added anchor it is not working.
      I have tried but unable to achieve.



      Can anyone suggest me?






      $(document).ready(function() {
      var carouselImg = document.getElementsByClassName('carousel-img');
      $('a.post-carousel').on('click', function() {
      var expandImg = document.getElementById('expandedImg');
      var carouselImg = document.getElementsByClassName('carousel-img');
      expandImg.src = carouselImg.src;

      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });
      });

      * {
      box-sizing: border-box;
      }

      .gallery-wrap {
      width: 50%;
      height: 1066px;
      margin: 0 auto;
      display: flex;
      }

      .gallery-row {
      width: 52%;
      max-height: 497px;
      }

      .gallery-column {
      position: relative;
      padding: 10px;
      }

      .img-caption {
      position: absolute;
      bottom: 10%;
      }

      .gallery-column img {
      width: 100%;
      opacity: 0.8;
      cursor: pointer;
      }

      .gallery-column img:hover {
      opacity: 1;
      }

      .gallery-container {
      position: relative;
      width: 90%;
      height: 500px;
      }

      #expandedImg {
      width: 100%;
      height: 100%;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <div class="gallery-wrap">

      <div class="gallery-container" style="display: block;">
      <a href="#" class="post-carousel">
      <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>

      <div class="gallery-row">
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>nsectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>

      </div>
      </div>












      share|improve this question
















      I'm working on Image gallery here I want onClick anchor tag current image display in .gallery-container is not working. Previously on image img click, I got the output .gallery-column img.



      $('.gallery-column img').on('click', function(){
      var expandImg = document.getElementById('expandedImg');
      expandImg.src = this.src;
      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });


      This code is working fine. Now I have added anchor it is not working.
      I have tried but unable to achieve.



      Can anyone suggest me?






      $(document).ready(function() {
      var carouselImg = document.getElementsByClassName('carousel-img');
      $('a.post-carousel').on('click', function() {
      var expandImg = document.getElementById('expandedImg');
      var carouselImg = document.getElementsByClassName('carousel-img');
      expandImg.src = carouselImg.src;

      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });
      });

      * {
      box-sizing: border-box;
      }

      .gallery-wrap {
      width: 50%;
      height: 1066px;
      margin: 0 auto;
      display: flex;
      }

      .gallery-row {
      width: 52%;
      max-height: 497px;
      }

      .gallery-column {
      position: relative;
      padding: 10px;
      }

      .img-caption {
      position: absolute;
      bottom: 10%;
      }

      .gallery-column img {
      width: 100%;
      opacity: 0.8;
      cursor: pointer;
      }

      .gallery-column img:hover {
      opacity: 1;
      }

      .gallery-container {
      position: relative;
      width: 90%;
      height: 500px;
      }

      #expandedImg {
      width: 100%;
      height: 100%;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <div class="gallery-wrap">

      <div class="gallery-container" style="display: block;">
      <a href="#" class="post-carousel">
      <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>

      <div class="gallery-row">
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>nsectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>

      </div>
      </div>








      $(document).ready(function() {
      var carouselImg = document.getElementsByClassName('carousel-img');
      $('a.post-carousel').on('click', function() {
      var expandImg = document.getElementById('expandedImg');
      var carouselImg = document.getElementsByClassName('carousel-img');
      expandImg.src = carouselImg.src;

      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });
      });

      * {
      box-sizing: border-box;
      }

      .gallery-wrap {
      width: 50%;
      height: 1066px;
      margin: 0 auto;
      display: flex;
      }

      .gallery-row {
      width: 52%;
      max-height: 497px;
      }

      .gallery-column {
      position: relative;
      padding: 10px;
      }

      .img-caption {
      position: absolute;
      bottom: 10%;
      }

      .gallery-column img {
      width: 100%;
      opacity: 0.8;
      cursor: pointer;
      }

      .gallery-column img:hover {
      opacity: 1;
      }

      .gallery-container {
      position: relative;
      width: 90%;
      height: 500px;
      }

      #expandedImg {
      width: 100%;
      height: 100%;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <div class="gallery-wrap">

      <div class="gallery-container" style="display: block;">
      <a href="#" class="post-carousel">
      <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>

      <div class="gallery-row">
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>nsectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>

      </div>
      </div>





      $(document).ready(function() {
      var carouselImg = document.getElementsByClassName('carousel-img');
      $('a.post-carousel').on('click', function() {
      var expandImg = document.getElementById('expandedImg');
      var carouselImg = document.getElementsByClassName('carousel-img');
      expandImg.src = carouselImg.src;

      expandImg.parentElement.style.display = "block";
      var imageCaption = $(this).next("div").html();
      $("#expandedImgCaption").html(imageCaption);
      });
      });

      * {
      box-sizing: border-box;
      }

      .gallery-wrap {
      width: 50%;
      height: 1066px;
      margin: 0 auto;
      display: flex;
      }

      .gallery-row {
      width: 52%;
      max-height: 497px;
      }

      .gallery-column {
      position: relative;
      padding: 10px;
      }

      .img-caption {
      position: absolute;
      bottom: 10%;
      }

      .gallery-column img {
      width: 100%;
      opacity: 0.8;
      cursor: pointer;
      }

      .gallery-column img:hover {
      opacity: 1;
      }

      .gallery-container {
      position: relative;
      width: 90%;
      height: 500px;
      }

      #expandedImg {
      width: 100%;
      height: 100%;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
      <div class="gallery-wrap">

      <div class="gallery-container" style="display: block;">
      <a href="#" class="post-carousel">
      <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>

      <div class="gallery-row">
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>Still more than 2 Millions+ people using</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>sit amet, consectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>
      <div class="gallery-column">
      <a href="#" class="post-carousel">
      <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
      <div class="img-caption">
      <h3>nsectetur adipiscing elit. Donec</h3>
      </div>
      </a>
      </div>

      </div>
      </div>






      javascript jquery html






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 22 '18 at 11:03









      Zakaria Acharki

      57.3k134471




      57.3k134471










      asked Nov 22 '18 at 10:51









      HusnaHusna

      360314




      360314
























          2 Answers
          2






          active

          oldest

          votes


















          0














          That could be simply achieved using the this keyword to target the related .carousel-img.



          NOTE 1: You've missed to attach the id expandedImgCaption to the img-caption of expandedImg:



          <div id="expandedImgCaption" class="img-caption">


          NOTE 2: You don't need the next() since the div is inside the anchor not next of it :



          $("#expandedImgCaption").html($('.img-caption', this).html());





          $(document).ready(function() {
          $('a.post-carousel').on('click', function() {
          $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
          $("#expandedImgCaption").html($('.img-caption', this).html());
          });
          });

          * {
          box-sizing: border-box;
          }

          .gallery-wrap {
          width: 50%;
          height: 1066px;
          margin: 0 auto;
          display: flex;
          }

          .gallery-row {
          width: 52%;
          max-height: 497px;
          }

          .gallery-column {
          position: relative;
          padding: 10px;
          }

          .img-caption {
          position: absolute;
          bottom: 10%;
          }

          .gallery-column img {
          width: 100%;
          opacity: 0.8;
          cursor: pointer;
          }

          .gallery-column img:hover {
          opacity: 1;
          }

          .gallery-container {
          position: relative;
          width: 90%;
          height: 500px;
          }

          #expandedImg {
          width: 100%;
          height: 100%;
          }

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
          <div class="gallery-wrap">

          <div class="gallery-container" style="display: block;">
          <a href="#" class="post-carousel">
          <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
          <div id="expandedImgCaption" class="img-caption">
          <h3>Still more than 2 Millions+ people using</h3>
          </div>
          </a>
          </div>

          <div class="gallery-row">
          <div class="gallery-column">
          <a href="#" class="post-carousel">
          <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
          <div class="img-caption">
          <h3>Still more than 2 Millions+ people using</h3>
          </div>
          </a>
          </div>
          <div class="gallery-column">
          <a href="#" class="post-carousel">
          <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
          <div class="img-caption">
          <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
          </div>
          </a>
          </div>
          <div class="gallery-column">
          <a href="#" class="post-carousel">
          <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
          <div class="img-caption">
          <h3>sit amet, consectetur adipiscing elit. Donec</h3>
          </div>
          </a>
          </div>
          <div class="gallery-column">
          <a href="#" class="post-carousel">
          <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
          <div class="img-caption">
          <h3>nsectetur adipiscing elit. Donec</h3>
          </div>
          </a>
          </div>

          </div>
          </div>








          share|improve this answer































            1














            Try using this like the following way:






            $(document).ready(function() {
            var carouselImg = document.getElementsByClassName('carousel-img');
            $('a.post-carousel').on('click', function() {
            var expandImg = document.getElementById('expandedImg');
            expandImg.src = $(this).find('img').attr('src');

            var imageCaption = $(this).find('.img-caption > h3').text();
            $('.gallery-container').find('.img-caption > h3').text(imageCaption);
            });
            });

            * {
            box-sizing: border-box;
            }
            .gallery-wrap {
            width: 50%;
            height: 1066px;
            margin: 0 auto;
            display: flex;
            }

            .gallery-row {
            width: 52%;
            max-height: 497px;
            }

            .gallery-column {
            position: relative;
            padding: 10px;
            }

            .img-caption {
            position: absolute;
            bottom: 10%;
            }

            .gallery-column img {
            width: 100%;
            opacity: 0.8;
            cursor: pointer;
            }

            .gallery-column img:hover {
            opacity: 1;
            }

            .gallery-container {
            position: relative;
            width: 90%;
            height: 500px;
            }

            #expandedImg {
            width: 100%;
            height: 100%;
            }

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div class="gallery-wrap">

            <div class="gallery-container" style="display: block;">
            <a href="#" class="post-carousel">
            <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
            <div class="img-caption">
            <h3>Still more than 2 Millions+ people using</h3>
            </div>
            </a>
            </div>

            <div class="gallery-row">
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>Still more than 2 Millions+ people using</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>sit amet, consectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>nsectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>

            </div>
            </div>








            share|improve this answer





















            • 1





              img-caption is not changing.

              – Husna
              Nov 22 '18 at 11:22












            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53429302%2fonclick-anchor-tag-a-current-div-display-using-jquery%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            That could be simply achieved using the this keyword to target the related .carousel-img.



            NOTE 1: You've missed to attach the id expandedImgCaption to the img-caption of expandedImg:



            <div id="expandedImgCaption" class="img-caption">


            NOTE 2: You don't need the next() since the div is inside the anchor not next of it :



            $("#expandedImgCaption").html($('.img-caption', this).html());





            $(document).ready(function() {
            $('a.post-carousel').on('click', function() {
            $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
            $("#expandedImgCaption").html($('.img-caption', this).html());
            });
            });

            * {
            box-sizing: border-box;
            }

            .gallery-wrap {
            width: 50%;
            height: 1066px;
            margin: 0 auto;
            display: flex;
            }

            .gallery-row {
            width: 52%;
            max-height: 497px;
            }

            .gallery-column {
            position: relative;
            padding: 10px;
            }

            .img-caption {
            position: absolute;
            bottom: 10%;
            }

            .gallery-column img {
            width: 100%;
            opacity: 0.8;
            cursor: pointer;
            }

            .gallery-column img:hover {
            opacity: 1;
            }

            .gallery-container {
            position: relative;
            width: 90%;
            height: 500px;
            }

            #expandedImg {
            width: 100%;
            height: 100%;
            }

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
            <div class="gallery-wrap">

            <div class="gallery-container" style="display: block;">
            <a href="#" class="post-carousel">
            <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
            <div id="expandedImgCaption" class="img-caption">
            <h3>Still more than 2 Millions+ people using</h3>
            </div>
            </a>
            </div>

            <div class="gallery-row">
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>Still more than 2 Millions+ people using</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>sit amet, consectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>
            <div class="gallery-column">
            <a href="#" class="post-carousel">
            <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
            <div class="img-caption">
            <h3>nsectetur adipiscing elit. Donec</h3>
            </div>
            </a>
            </div>

            </div>
            </div>








            share|improve this answer




























              0














              That could be simply achieved using the this keyword to target the related .carousel-img.



              NOTE 1: You've missed to attach the id expandedImgCaption to the img-caption of expandedImg:



              <div id="expandedImgCaption" class="img-caption">


              NOTE 2: You don't need the next() since the div is inside the anchor not next of it :



              $("#expandedImgCaption").html($('.img-caption', this).html());





              $(document).ready(function() {
              $('a.post-carousel').on('click', function() {
              $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
              $("#expandedImgCaption").html($('.img-caption', this).html());
              });
              });

              * {
              box-sizing: border-box;
              }

              .gallery-wrap {
              width: 50%;
              height: 1066px;
              margin: 0 auto;
              display: flex;
              }

              .gallery-row {
              width: 52%;
              max-height: 497px;
              }

              .gallery-column {
              position: relative;
              padding: 10px;
              }

              .img-caption {
              position: absolute;
              bottom: 10%;
              }

              .gallery-column img {
              width: 100%;
              opacity: 0.8;
              cursor: pointer;
              }

              .gallery-column img:hover {
              opacity: 1;
              }

              .gallery-container {
              position: relative;
              width: 90%;
              height: 500px;
              }

              #expandedImg {
              width: 100%;
              height: 100%;
              }

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
              <div class="gallery-wrap">

              <div class="gallery-container" style="display: block;">
              <a href="#" class="post-carousel">
              <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
              <div id="expandedImgCaption" class="img-caption">
              <h3>Still more than 2 Millions+ people using</h3>
              </div>
              </a>
              </div>

              <div class="gallery-row">
              <div class="gallery-column">
              <a href="#" class="post-carousel">
              <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
              <div class="img-caption">
              <h3>Still more than 2 Millions+ people using</h3>
              </div>
              </a>
              </div>
              <div class="gallery-column">
              <a href="#" class="post-carousel">
              <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
              <div class="img-caption">
              <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
              </div>
              </a>
              </div>
              <div class="gallery-column">
              <a href="#" class="post-carousel">
              <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
              <div class="img-caption">
              <h3>sit amet, consectetur adipiscing elit. Donec</h3>
              </div>
              </a>
              </div>
              <div class="gallery-column">
              <a href="#" class="post-carousel">
              <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
              <div class="img-caption">
              <h3>nsectetur adipiscing elit. Donec</h3>
              </div>
              </a>
              </div>

              </div>
              </div>








              share|improve this answer


























                0












                0








                0







                That could be simply achieved using the this keyword to target the related .carousel-img.



                NOTE 1: You've missed to attach the id expandedImgCaption to the img-caption of expandedImg:



                <div id="expandedImgCaption" class="img-caption">


                NOTE 2: You don't need the next() since the div is inside the anchor not next of it :



                $("#expandedImgCaption").html($('.img-caption', this).html());





                $(document).ready(function() {
                $('a.post-carousel').on('click', function() {
                $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
                $("#expandedImgCaption").html($('.img-caption', this).html());
                });
                });

                * {
                box-sizing: border-box;
                }

                .gallery-wrap {
                width: 50%;
                height: 1066px;
                margin: 0 auto;
                display: flex;
                }

                .gallery-row {
                width: 52%;
                max-height: 497px;
                }

                .gallery-column {
                position: relative;
                padding: 10px;
                }

                .img-caption {
                position: absolute;
                bottom: 10%;
                }

                .gallery-column img {
                width: 100%;
                opacity: 0.8;
                cursor: pointer;
                }

                .gallery-column img:hover {
                opacity: 1;
                }

                .gallery-container {
                position: relative;
                width: 90%;
                height: 500px;
                }

                #expandedImg {
                width: 100%;
                height: 100%;
                }

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <div class="gallery-wrap">

                <div class="gallery-container" style="display: block;">
                <a href="#" class="post-carousel">
                <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                <div id="expandedImgCaption" class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>

                <div class="gallery-row">
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>nsectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>

                </div>
                </div>








                share|improve this answer













                That could be simply achieved using the this keyword to target the related .carousel-img.



                NOTE 1: You've missed to attach the id expandedImgCaption to the img-caption of expandedImg:



                <div id="expandedImgCaption" class="img-caption">


                NOTE 2: You don't need the next() since the div is inside the anchor not next of it :



                $("#expandedImgCaption").html($('.img-caption', this).html());





                $(document).ready(function() {
                $('a.post-carousel').on('click', function() {
                $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
                $("#expandedImgCaption").html($('.img-caption', this).html());
                });
                });

                * {
                box-sizing: border-box;
                }

                .gallery-wrap {
                width: 50%;
                height: 1066px;
                margin: 0 auto;
                display: flex;
                }

                .gallery-row {
                width: 52%;
                max-height: 497px;
                }

                .gallery-column {
                position: relative;
                padding: 10px;
                }

                .img-caption {
                position: absolute;
                bottom: 10%;
                }

                .gallery-column img {
                width: 100%;
                opacity: 0.8;
                cursor: pointer;
                }

                .gallery-column img:hover {
                opacity: 1;
                }

                .gallery-container {
                position: relative;
                width: 90%;
                height: 500px;
                }

                #expandedImg {
                width: 100%;
                height: 100%;
                }

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <div class="gallery-wrap">

                <div class="gallery-container" style="display: block;">
                <a href="#" class="post-carousel">
                <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                <div id="expandedImgCaption" class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>

                <div class="gallery-row">
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>nsectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>

                </div>
                </div>








                $(document).ready(function() {
                $('a.post-carousel').on('click', function() {
                $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
                $("#expandedImgCaption").html($('.img-caption', this).html());
                });
                });

                * {
                box-sizing: border-box;
                }

                .gallery-wrap {
                width: 50%;
                height: 1066px;
                margin: 0 auto;
                display: flex;
                }

                .gallery-row {
                width: 52%;
                max-height: 497px;
                }

                .gallery-column {
                position: relative;
                padding: 10px;
                }

                .img-caption {
                position: absolute;
                bottom: 10%;
                }

                .gallery-column img {
                width: 100%;
                opacity: 0.8;
                cursor: pointer;
                }

                .gallery-column img:hover {
                opacity: 1;
                }

                .gallery-container {
                position: relative;
                width: 90%;
                height: 500px;
                }

                #expandedImg {
                width: 100%;
                height: 100%;
                }

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <div class="gallery-wrap">

                <div class="gallery-container" style="display: block;">
                <a href="#" class="post-carousel">
                <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                <div id="expandedImgCaption" class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>

                <div class="gallery-row">
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>nsectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>

                </div>
                </div>





                $(document).ready(function() {
                $('a.post-carousel').on('click', function() {
                $('#expandedImg').attr('src', $('.carousel-img', this).attr('src')).parent().show();
                $("#expandedImgCaption").html($('.img-caption', this).html());
                });
                });

                * {
                box-sizing: border-box;
                }

                .gallery-wrap {
                width: 50%;
                height: 1066px;
                margin: 0 auto;
                display: flex;
                }

                .gallery-row {
                width: 52%;
                max-height: 497px;
                }

                .gallery-column {
                position: relative;
                padding: 10px;
                }

                .img-caption {
                position: absolute;
                bottom: 10%;
                }

                .gallery-column img {
                width: 100%;
                opacity: 0.8;
                cursor: pointer;
                }

                .gallery-column img:hover {
                opacity: 1;
                }

                .gallery-container {
                position: relative;
                width: 90%;
                height: 500px;
                }

                #expandedImg {
                width: 100%;
                height: 100%;
                }

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <div class="gallery-wrap">

                <div class="gallery-container" style="display: block;">
                <a href="#" class="post-carousel">
                <img id="expandedImg" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                <div id="expandedImgCaption" class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>

                <div class="gallery-row">
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>Still more than 2 Millions+ people using</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>
                <div class="gallery-column">
                <a href="#" class="post-carousel">
                <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                <div class="img-caption">
                <h3>nsectetur adipiscing elit. Donec</h3>
                </div>
                </a>
                </div>

                </div>
                </div>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 10:58









                Zakaria AcharkiZakaria Acharki

                57.3k134471




                57.3k134471

























                    1














                    Try using this like the following way:






                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>








                    share|improve this answer





















                    • 1





                      img-caption is not changing.

                      – Husna
                      Nov 22 '18 at 11:22
















                    1














                    Try using this like the following way:






                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>








                    share|improve this answer





















                    • 1





                      img-caption is not changing.

                      – Husna
                      Nov 22 '18 at 11:22














                    1












                    1








                    1







                    Try using this like the following way:






                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>








                    share|improve this answer















                    Try using this like the following way:






                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>








                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>





                    $(document).ready(function() {
                    var carouselImg = document.getElementsByClassName('carousel-img');
                    $('a.post-carousel').on('click', function() {
                    var expandImg = document.getElementById('expandedImg');
                    expandImg.src = $(this).find('img').attr('src');

                    var imageCaption = $(this).find('.img-caption > h3').text();
                    $('.gallery-container').find('.img-caption > h3').text(imageCaption);
                    });
                    });

                    * {
                    box-sizing: border-box;
                    }
                    .gallery-wrap {
                    width: 50%;
                    height: 1066px;
                    margin: 0 auto;
                    display: flex;
                    }

                    .gallery-row {
                    width: 52%;
                    max-height: 497px;
                    }

                    .gallery-column {
                    position: relative;
                    padding: 10px;
                    }

                    .img-caption {
                    position: absolute;
                    bottom: 10%;
                    }

                    .gallery-column img {
                    width: 100%;
                    opacity: 0.8;
                    cursor: pointer;
                    }

                    .gallery-column img:hover {
                    opacity: 1;
                    }

                    .gallery-container {
                    position: relative;
                    width: 90%;
                    height: 500px;
                    }

                    #expandedImg {
                    width: 100%;
                    height: 100%;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="gallery-wrap">

                    <div class="gallery-container" style="display: block;">
                    <a href="#" class="post-carousel">
                    <img id="expandedImg" class="img-caption" src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>

                    <div class="gallery-row">
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542648108-66d2937f4bcf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ebbcae6a8310fd61d8a9fc82b79c792&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>Still more than 2 Millions+ people using</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542646822891-0a8451fce513?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=181de57e88385f8f32f48aef4e2831f9&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>olor sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542632890661-441e6f424098?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=60444a082924abcdc72901abaa800620&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>sit amet, consectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>
                    <div class="gallery-column">
                    <a href="#" class="post-carousel">
                    <img src="https://images.unsplash.com/photo-1542635521008-f80f4d69bad4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6e7baa2e8b1e236090d116d35bf0855&auto=format&fit=crop&w=500&q=60" alt="" class="carousel-img">
                    <div class="img-caption">
                    <h3>nsectetur adipiscing elit. Donec</h3>
                    </div>
                    </a>
                    </div>

                    </div>
                    </div>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Nov 22 '18 at 11:39

























                    answered Nov 22 '18 at 10:58









                    MamunMamun

                    30.9k71932




                    30.9k71932








                    • 1





                      img-caption is not changing.

                      – Husna
                      Nov 22 '18 at 11:22














                    • 1





                      img-caption is not changing.

                      – Husna
                      Nov 22 '18 at 11:22








                    1




                    1





                    img-caption is not changing.

                    – Husna
                    Nov 22 '18 at 11:22





                    img-caption is not changing.

                    – Husna
                    Nov 22 '18 at 11:22


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53429302%2fonclick-anchor-tag-a-current-div-display-using-jquery%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Guess what letter conforming each word

                    Port of Spain

                    Run scheduled task as local user group (not BUILTIN)