Encountering a syntax error while utilizing a JavaScript variable in a jQuery selector for a lightbox feature

Question

Encountering a syntax error while utilizing a JavaScript variable in a jQuery selector for a lightbox feature

I'm currently working on creating a lightbox feature and have reached the stage where I am implementing next and previous buttons to navigate through images. I am utilizing console.log to check if the correct href is being retrieved when the next button is clicked.

My current challenge is using a JavaScript variable instead of an HTML identifier within a JQuery selector. While I've come across information indicating this is possible here, encountering syntax errors upon clicking next.

The main objective is to display the next or previous image in the lightbox whenever the next or prev (once implemented) buttons are clicked, respectively.

Your assistance in resolving this issue would be greatly appreciated!

(For better visualization, please view the code snippet in full screen mode)

javascript jquery html css

Answer 1

Answer №1

I have implemented using index values for navigating to the next and previous images.

 

  
 $(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;
}

...
...

<ul>
      <li id="prev">Previous</li>
      <li id="next">Next</li>
    </ul>
  </div>
</div>

Answer 2

I have implemented using index values for navigating to the next and previous images.

 

  
 $(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;
}

...
...

<ul>
      <li id="prev">Previous</li>
      <li id="next">Next</li>
    </ul>
  </div>
</div>

Answer 3

Answer №2

When you use <code>var images = $("#images-gallery a")

, it generates a collection of HTML elements.

However, if you access it later as a source...

$("#"+currentImg)

...you are simply adding a pound sign to the HTML code.

Answer 4

When you use <code>var images = $("#images-gallery a")

, it generates a collection of HTML elements.

However, if you access it later as a source...

$("#"+currentImg)

...you are simply adding a pound sign to the HTML code.

Encountering a syntax error while utilizing a JavaScript variable in a jQuery selector for a lightbox feature

Answer №1

Answer №2

Similar questions

What is the method to determine the inviter on Discord.js?

Updating the filter predicate of the MatTableDataSource should allow for refreshing the table content without needing to modify the filter

Is it possible to eliminate the background color by double clicking on a row within an HTML table?

Tips for utilizing the intro.js npm package with Meteor version 1.4.1.1

substituting the deep watcher in Angular

Breaking Down and Optimizing your Code with Destructuring and

Issue with inner span not inheriting max-width set on outer <td> element

React web app experiencing an issue with MUI Drawer opening flawlessly but failing to close

Steps to eliminate validation following the clearing of input fields

Using $q.all function in a controller to fetch data from a service and receiving an

Is there a solution to resolve the Firestore issue stating: "FieldPath.documentId is not a recognized function"?

Does setting `mobile.ajaxEnabled = false` prevent any ajax calls from functioning?

I am looking to insert a jQuery value or variable into the plugin options

Having trouble getting the expected transition effects to work with Vue.js

Looping through Jquery Ajax requests

Generate a JSON file using Node.js

The error message "ReferenceError: process is not defined" occurs when the 500 process is

Use ajax to load a webpage into a specific div, then reload the same div after submitting

Incorporating PHP arrays into JavaScript code within a PDO environment

Importing classes in ECMAScript 6 does not work properly, causing issues when running scripts