I'm trying to make a lightbox and I'm at the point where I'm making next and previous buttons when the lightbox is in view. I'm using console.log to see if the correct href is being returned when the next button is clicked.

However, I want to use a Javascript variable rather than an HTML identifier in a Jquery selector. I've read that this is possible here, but am getting a syntax error when next is clicked.

The end goal is that when next or prev (once I get to it) is clicked, the next or previous image will be displayed in the lightbox.

Any help would be appreciated - or s

(please view the code snippet full screen)

$(document).ready(function($) {

  $('.gallery-item').click(function(e) {
    e.preventDefault();

    var image_href = $(this).children('a').attr("href");

    var image = '<img src="' + image_href + '" />';

    $("#lightbox").css("display", "block");
    $('#content').html(image);

    $("#next").click(function() {
      var images = $("#images-gallery a");
      console.log(images);
      var currentImg = image;
      console.log(currentImg);
      var nextImg = '<img src="' + $("#"+currentImg).closest('div').next().find('a').attr('href') + '"/>';
      console.log(nextImg);
    })

  });

  $('body').on('click', '#lightbox', function() {
    $("#lightbox").css("display", "none");
  });

});
#gallery {
  width: 93%;
}

#images-gallery {
  display: grid;
  height: 250vh;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  margin: 0 2% 0 5%;
}

.gallery-item.one {
  grid-row: span 2;
  grid-column: span 2;
}

.gallery-item.two {
  grid-row: span 3;
  grid-column: span 3;
}

.gallery-item.three {
  grid-row: span 3;
  grid-column: span 2;
}

.gallery-item.four {
  grid-row: span 3;
  grid-column: span 1;
}

#image-one {
  background-image: url("https://i.ibb.co/QPnhxMG/1.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-two {
  background-image: url("https://i.ibb.co/mCvG6D5/2.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-three {
  background-image: url("https://i.ibb.co/vk9knm4/3.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-four {
  background-image: url("https://i.ibb.co/2qzmFC5/4.jpg");
  background-size: cover;
  background-position: 0% 30%;
}

#image-five {
  background-image: url("https://i.ibb.co/1GTpjvT/5.jpg");
  background-size: cover;
  background-position: 40% 10%;
}

#image-six {
  background-image: url("https://i.ibb.co/1Ggs7Dc/6.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-seven {
  background-image: url("https://i.ibb.co/TtTQHyM/9.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-eight {
  background-image: url("https://i.ibb.co/kXyt3Vh/8.jpg");
  background-size: cover;
  background-position: 60% 20%;
}

#image-nine {
  background-image: url("https://i.ibb.co/wsm2pzw/7.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-ten {
  background-image: url("https://i.ibb.co/p2P08Rn/10.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-eleven {
  background-image: url("https://i.ibb.co/XX6rhVF/11.jpg");
  background-size: cover;
  background-position: 90% 20%;
}

#image-twelve {
  background-image: url("https://i.ibb.co/v4xTTPg/12.jpg");
  background-size: cover;
  background-position: 0% 0%;
}

#image-thirteen {
  background-image: url("https://i.ibb.co/5cc16kW/13.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-fourteen {
  background-image: url("https://i.ibb.co/C6QYn2C/14.jpg");
  background-size: cover;
  background-position: 0% 30%;
}

#image-fifteen {
  background-image: url("https://i.ibb.co/d5hcyQQ/15.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-sixteen {
  background-image: url("https://i.ibb.co/VptGL3g/16.jpg");
  background-size: cover;
  background-position: 10% 20%;
}

#image-seventeen {
  background-image: url("https://i.ibb.co/vPjwYZg/17.jpg");
  background-size: cover;
  background-position: 30% 20%;
}

#image-eighteen {
  background-image: url("https://i.ibb.co/vkpXpB0/18.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#allcontent {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 30%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, .7);
  text-align: center;
  z-index: 2;
  display: none;
  color: #ffffff;
}

#lightbox ul {
  margin: 0;
  list-style: none;
  padding-left: 0;
  text-align: center;
  display: inline-block;
}

#lightbox ul li {
  display: inline-block;
}

#lightbox img {
  box-shadow: 0 0 25px #111;
  -webkit-box-shadow: 0 0 25px #111;
  -moz-box-shadow: 0 0 25px #111;
  max-width: 650px;
  max-height: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="gallery">
  <div class="header">
    <h4>Gallery.</h4>
  </div>
  <div id="images-gallery" class="fade">
    <div id="image-one" class="gallery-item one">
      <a href="https://i.ibb.co/Xz6yLB5/Fencing.jpg"></a>
    </div>
    <div id="image-two" class="gallery-item two">
      <a href="https://i.ibb.co/mCvG6D5/2.jpg"></a>
    </div>
    <div id="image-three" class="gallery-item one">
      <a href="https://i.ibb.co/vk9knm4/3.jpg"></a>
    </div>
    <div id="image-four" class="gallery-item three">
      <a href="https://i.ibb.co/2qzmFC5/4.jpg"></a>
    </div>
    <div id="image-five" class="gallery-item four">
      <a href="https://i.ibb.co/1GTpjvT/5.jpg"></a>
    </div>
    <div id="image-six" class="gallery-item one">
      <a href="https://i.ibb.co/1Ggs7Dc/6.jpg"></a>
    </div>
    <div id="image-seven" class="gallery-item two">
      <a href="https://i.ibb.co/TtTQHyM/9.jpg"></a>
    </div>
    <div id="image-eight" class="gallery-item four">
      <a href="https://i.ibb.co/kXyt3Vh/8.jpg"></a>
    </div>
    <div id="image-nine" class="gallery-item four">
      <a href="https://i.ibb.co/wsm2pzw/7.jpg"></a>
    </div>
    <div id="image-ten" class="gallery-item three">
      <a href="https://i.ibb.co/p2P08Rn/10.jpg"></a>
    </div>
    <div id="image-eleven" class="gallery-item four">
      <a href="https://i.ibb.co/XX6rhVF/11.jpg"></a>
    </div>
    <div id="image-twelve" class="gallery-item three">
      <a href="https://i.ibb.co/v4xTTPg/12.jpg"></a>
    </div>
    <div id="image-thirteen" class="gallery-item two">
      <a href="https://i.ibb.co/5cc16kW/13.jpg"></a>
    </div>
    <div id="image-fourteen" class="gallery-item one">
      <a href="https://i.ibb.co/C6QYn2C/14.jpg"></a>
    </div>
    <div id="image-fifteen" class="gallery-item one">
      <a href="https://i.ibb.co/d5hcyQQ/15.jpg"></a>
    </div>
    <div id="image-sixteen" class="gallery-item three">
      <a href="https://i.ibb.co/VptGL3g/16.jpg"></a>
    </div>
    <div id="image-seventeen" class="gallery-item four">
      <a href="https://i.ibb.co/vPjwYZg/17.jpg"></a>
    </div>
    <div id="image-eighteen" class="gallery-item one">
      <a href="https://i.ibb.co/vkpXpB0/18.jpg"></a>
    </div>
  </div>
</div>

<div id="lightbox">
  <div id="allcontent">
    <div id="content">
      <img src="#" />
    </div>
    <ul>
      <li id="prev">Previous</li>
      <li id="next">Next</li>
    </ul>
  </div>
</div>

2 Answers

0
chander shekhar On Best Solutions

Please check this may be helpful for you. If this is ok please accept the answer. I am using index value for next and previous click.

 

  
 $(document).ready(function($) {
    $('.gallery-item').click(function(e) {
     e.preventDefault();
     var image_href = $(this).children('a').attr("href");
     var image = '<img src="' + image_href + '" />';
     $("#lightbox").css("display", "block");
     $('#content').html(image);
     
     $("#next").click(function() {
      var images = $("#images-gallery a");
      if (thisIndex >= (images.length - 1)) {
       //alert("if")
       thisIndex = 0;
      } else if (thisIndex < images.length) {
       thisIndex = (thisIndex + 1);
     //alert("else")
      }
      var nn = $(images).eq(thisIndex).attr("href");
      var nnImg = '<img src="' + nn + '" />';
      $('#content').html(nnImg);
      //alert(nnImg)
     });
     
     $("#prev").click(function() {
      var images = $("#images-gallery a");
      if (thisIndex <= 0) {
       thisIndex = (images.length - 1);
      } else if (thisIndex > 0) {
       thisIndex = (thisIndex - 1);
      }
      var pr = $(images).eq(thisIndex).attr("href");
      var prImg = '<img src="' + pr + '" />';
      $('#content').html(prImg);
      //alert(prImg)
     });
     var thisIndex = $(this).index();
     
    });

  $('body').on('click', '#lightbox', function() {
    //$("#lightbox").css("display", "none");
  });

});
#gallery {
  width: 93%;
}

#images-gallery {
  display: grid;
  height: 250vh;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  margin: 0 2% 0 5%;
}

.gallery-item.one {
  grid-row: span 2;
  grid-column: span 2;
}

.gallery-item.two {
  grid-row: span 3;
  grid-column: span 3;
}

.gallery-item.three {
  grid-row: span 3;
  grid-column: span 2;
}

.gallery-item.four {
  grid-row: span 3;
  grid-column: span 1;
}

#image-one {
  background-image: url("https://i.ibb.co/QPnhxMG/1.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-two {
  background-image: url("https://i.ibb.co/mCvG6D5/2.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-three {
  background-image: url("https://i.ibb.co/vk9knm4/3.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-four {
  background-image: url("https://i.ibb.co/2qzmFC5/4.jpg");
  background-size: cover;
  background-position: 0% 30%;
}

#image-five {
  background-image: url("https://i.ibb.co/1GTpjvT/5.jpg");
  background-size: cover;
  background-position: 40% 10%;
}

#image-six {
  background-image: url("https://i.ibb.co/1Ggs7Dc/6.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-seven {
  background-image: url("https://i.ibb.co/TtTQHyM/9.jpg");
  background-size: cover;
  background-position: 0% 60%;
}

#image-eight {
  background-image: url("https://i.ibb.co/kXyt3Vh/8.jpg");
  background-size: cover;
  background-position: 60% 20%;
}

#image-nine {
  background-image: url("https://i.ibb.co/wsm2pzw/7.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-ten {
  background-image: url("https://i.ibb.co/p2P08Rn/10.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#image-eleven {
  background-image: url("https://i.ibb.co/XX6rhVF/11.jpg");
  background-size: cover;
  background-position: 90% 20%;
}

#image-twelve {
  background-image: url("https://i.ibb.co/v4xTTPg/12.jpg");
  background-size: cover;
  background-position: 0% 0%;
}

#image-thirteen {
  background-image: url("https://i.ibb.co/5cc16kW/13.jpg");
  background-size: cover;
  background-position: 0% 50%;
}

#image-fourteen {
  background-image: url("https://i.ibb.co/C6QYn2C/14.jpg");
  background-size: cover;
  background-position: 0% 30%;
}

#image-fifteen {
  background-image: url("https://i.ibb.co/d5hcyQQ/15.jpg");
  background-size: cover;
  background-position: 0% 80%;
}

#image-sixteen {
  background-image: url("https://i.ibb.co/VptGL3g/16.jpg");
  background-size: cover;
  background-position: 10% 20%;
}

#image-seventeen {
  background-image: url("https://i.ibb.co/vPjwYZg/17.jpg");
  background-size: cover;
  background-position: 30% 20%;
}

#image-eighteen {
  background-image: url("https://i.ibb.co/vkpXpB0/18.jpg");
  background-size: cover;
  background-position: 0% 20%;
}

#allcontent {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 30%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, .7);
  text-align: center;
  z-index: 2;
  display: none;
  color: #ffffff;
}

#lightbox ul {
  margin: 0;
  list-style: none;
  padding-left: 0;
  text-align: center;
  display: inline-block;
}

#lightbox ul li {
  display: inline-block;
}

#lightbox img {
  box-shadow: 0 0 25px #111;
  -webkit-box-shadow: 0 0 25px #111;
  -moz-box-shadow: 0 0 25px #111;
  max-width: 650px;
  max-height: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="gallery">
  <div class="header">
    <h4>Gallery.</h4>
  </div>
  <div id="images-gallery" class="fade">
    <div id="image-one" class="gallery-item one">
      <a href="https://i.ibb.co/Xz6yLB5/Fencing.jpg"></a>
    </div>
    <div id="image-two" class="gallery-item two">
      <a href="https://i.ibb.co/mCvG6D5/2.jpg"></a>
    </div>
    <div id="image-three" class="gallery-item one">
      <a href="https://i.ibb.co/vk9knm4/3.jpg"></a>
    </div>
    <div id="image-four" class="gallery-item three">
      <a href="https://i.ibb.co/2qzmFC5/4.jpg"></a>
    </div>
    <div id="image-five" class="gallery-item four">
      <a href="https://i.ibb.co/1GTpjvT/5.jpg"></a>
    </div>
    <div id="image-six" class="gallery-item one">
      <a href="https://i.ibb.co/1Ggs7Dc/6.jpg"></a>
    </div>
    <div id="image-seven" class="gallery-item two">
      <a href="https://i.ibb.co/TtTQHyM/9.jpg"></a>
    </div>
    <div id="image-eight" class="gallery-item four">
      <a href="https://i.ibb.co/kXyt3Vh/8.jpg"></a>
    </div>
    <div id="image-nine" class="gallery-item four">
      <a href="https://i.ibb.co/wsm2pzw/7.jpg"></a>
    </div>
    <div id="image-ten" class="gallery-item three">
      <a href="https://i.ibb.co/p2P08Rn/10.jpg"></a>
    </div>
    <div id="image-eleven" class="gallery-item four">
      <a href="https://i.ibb.co/XX6rhVF/11.jpg"></a>
    </div>
    <div id="image-twelve" class="gallery-item three">
      <a href="https://i.ibb.co/v4xTTPg/12.jpg"></a>
    </div>
    <div id="image-thirteen" class="gallery-item two">
      <a href="https://i.ibb.co/5cc16kW/13.jpg"></a>
    </div>
    <div id="image-fourteen" class="gallery-item one">
      <a href="https://i.ibb.co/C6QYn2C/14.jpg"></a>
    </div>
    <div id="image-fifteen" class="gallery-item one">
      <a href="https://i.ibb.co/d5hcyQQ/15.jpg"></a>
    </div>
    <div id="image-sixteen" class="gallery-item three">
      <a href="https://i.ibb.co/VptGL3g/16.jpg"></a>
    </div>
    <div id="image-seventeen" class="gallery-item four">
      <a href="https://i.ibb.co/vPjwYZg/17.jpg"></a>
    </div>
    <div id="image-eighteen" class="gallery-item one">
      <a href="https://i.ibb.co/vkpXpB0/18.jpg"></a>
    </div>
  </div>
</div>

<div id="lightbox">
  <div id="allcontent">
    <div id="content">
      <img src="#" />
    </div>
    <ul>
      <li id="prev">Previous</li>
      <li id="next">Next</li>
    </ul>
  </div>
</div>

0
Donkey Shame On

var images = $("#images-gallery a") returns a list of HTML elements, as you're no doubt aware.

But looks like when you call it later as a source..

$("#"+currentImg)

...you're just prepending an octothorpe to HTML.