0

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>
dumbquestionsbydumbpeople
  • 317
  • 3
  • 11

2 Answers2

0

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.

Donkey Shame
  • 754
  • 3
  • 18
  • Have a look at my question again buddy. I included a link to another SO post that states you can prepend an octothorpe to a JS variable to be able to use it as a JQuery selector. – dumbquestionsbydumbpeople Apr 22 '19 at 13:01
  • Right, but you're prepending an octorthorpe to an HTML string, rather than a recognized selector. I copied your code to Codepen and got the following syntax error: `Uncaught Error: Syntax error, unrecognized expression: #` – Donkey Shame Apr 22 '19 at 13:03
  • Right, I understand. I thought by using that logic, when I click next, that would give me the `href` of currentImg, then the following JQuery selectors would give an output of the next divs `a href`? – dumbquestionsbydumbpeople Apr 22 '19 at 13:11
0

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>
General Grievance
  • 4,555
  • 31
  • 31
  • 45
chander shekhar
  • 425
  • 2
  • 10