Friday

Syntax error when using a JS variable in a JQuery selector for a lightbox

1:36 AM css, html, javascript, jquery No comments

Issue

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>

Solution

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>

Answered By - chander shekhar

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

Syntax error when using a JS variable in a JQuery selector for a lightbox

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels