Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery.

Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was clicked, causing an error in the console.

After clicking a category in the carousel, the lightbox fails to open when clicking on an image, resulting in an error message.

The plugin generates the following errors:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f79b9e909f8390969b9b9a858ab5c787989795">[email protected]</a>...:10 Uncaught TypeError: Cannot read property 's' of undefined
    at new c (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce0e5ebe4f8ebede0e1e8f5eafcbb9a85b899a5">[email protected]</a>...:10)
    at Function.<anonymous> (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef838888879b888e838a839aa3f4809f82">[email protected]</a>...:10)
    at Function.each (jquery.min.js:2)
    at b.build (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="472b2e202f3320262b2a332e273d399999862b">[email protected]</a>...:5)
    at HTMLDivElement.<anonymous> (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e727779766a797f727e777e77beafb0ad">[email protected]</a>...:5)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)

https://i.sstatic.net/Ap4KA.jpg

The issue has been ongoing for two weeks, attempting to find a solution for it.

Click here for the demo

Alternatively, here is the code snippet:

(JavaScript code here)
(CSS code here)
(HTML & script code here)

javascriptjqueryhtmlcss

Answer №1

If you need to filter your carousel items, be cautious as it may break the lightbox instance. To prevent this, follow these steps:

  1. Start by destroying the lightbox. If you skip this step, creating a new lightbox may result in duplicate ID's and cause your lightbox to malfunction. Use the following code:
$('#myCarousel').data('lightGallery').destroy(true);

Make sure to include the true parameter for proper destruction; otherwise, it will only be closed if it's currently open.

  1. Next, proceed to filter the slider.
  2. After filtering, create a new lightbox.

For a demonstration, refer to this working example: https://codepen.io/anon/pen/XRemwV

For more information, check the documentation here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Listening for Events from Child Components in Vue.js

I am struggling to figure out how to send an event from a child component to its parent in order to change the view. Although I have been able to create and emit the event, my template does not seem to be properly registering it. I am working with Single ...

javascriptvue.jsvuejs2frontend

Customizing the Header Navigation in Vue App.vue Across Various Views

Struggling to find the best approach for managing a header navigation in Vue 2 using Vuex with VueRouter. The main issue is creating a dynamic 'header' type navigation in App.vue. <div id="nav"> <!--Trying to create a dynamic ...

javascriptvue.jsvuejs2vue-router

Implementing Github Oauth2 in a Rails server independent from a chrome extension

Looking to implement Github Oauth2 from my chrome extension, but rather than using chrome.identity.launchWebAuthFlow I want to handle it through my server. This way, I can avoid exposing my client ID and Client Secret in the javascript of the extension. My ...

javascriptruby-on-railsajaxgoogle-chrome-extensionoauth

Guide on dynamically loading email contacts options in selectize.js

I have been working with selectize.js to create an email contacts feature. However, I am facing an issue where the mail list retrieved from the database is displaying as undefined in selectize. Strangely, when I manually enter the return value, everything ...

javascriptjqueryasp.net-mvcselectize.js

Checking for the accuracy of the provided full name

There is a specific task at hand: The field labeled “First Name Last Name” must only contain 2 words, with each word being between 3 and 30 characters in length. Additionally, there should be only one space between the first and last name. The issue t ...

javascriptreactjsregex

Discovering dependencies for the Tabulator library can be achieved by following these

Can anyone provide me with a complete list of dependencies for Tabulator 4.2? I have already reviewed the package.json file, but it only contains devDependencies. ...

javascriptangulartabulator

What is the reason Node.js only prints one item at a time?

Currently, I am using node.js to extract items from a text file. Right now, the code prints out the items in the terminal, but I want it to be able to accept multiple parameters and print each of them individually instead of just the last one. // Checki ...

javascriptnode.jsterminal

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...

htmlcssflexbox

Execute a Jquery function on every field

I need to capitalize each value of the select options that come from a SQL database. However, the code provided only works on the first field... function capitalize(str){ var text = str.text().replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCas ...

javascriptjquery

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

jqueryhtmlruby-on-rails

Monitor files in different directories with the help of pm2

Can pm2 detect changes in directories outside of the current one? For example, if I have an index.js file in /home/sprguillen/workspace/node that needs to be run by pm2, but my configuration file is located outside in /home/sprguillen/workspace/config. I ...

javascriptnode.jspm2

Trouble with retrieving dates in ISO format

My collection stores the date of birth field in ISO format, for example: ISODate("1980-01-01T20:20:19.198Z") However, when I use a date time picker on my HTML page, it displays the date like this: 01/01/1980 Unfortunately, when querying for the date of ...

javascriptnode.jsangularjsmongodb

A fixed header for tables that shifts along with horizontal scrolling

Seeking assistance with a persistent issue - I have a table with a fixed header on vertical scroll (see CSS and Javascript below), but the header fails to move horizontally when I scroll. window.onscroll = functi ...

javascripthtmlcss

Executing a single Function within the UseEffect Hook

Can anyone assist me with solving this code puzzle? I have a carousel element that includes icons for moving to the previous and next slides. Whenever these icons are clicked, a specific function needs to be triggered within the useEffect() hook. The spec ...

javascriptreactjsreact-hooks

The Bootstrap carousel's transition effect is not functioning as expected

The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel. Here is the HTML code snippet: <div id="testimonialsSlides" class="carousel carousel-fade" data-ride="fa ...

csstwitter-bootstrapcarouselbootstrap-4

Incorporating Selenium Python to display text results in a single-line format for enhanced output presentation

Looking for a way to extract data from the following HTML code: <div class="main"> <div class="firstdigitinside"> <span class="firstdigit"> <span class="firstdigithere>1 ...

pythonhtmlseleniumweb-scraping

Discover the visibility of an element through monitoring DOM manipulation with Selenium

Is it possible to monitor a webpage for events such as when an element becomes visible? Can this be achieved using Selenium? For instance, if I set a timeframe to watch a webpage from startTime to endTime, various page events could be recorded, including ...

javascriptjavahtmlseleniumdom

Viewing MSQL data using PHP. Interested in transferring specific rows to a different SQL table and removing them from the current table

I am currently in the process of creating a mobile helpdesk system for my department. The system involves an HTML form that sends data to a MySQL table, which is then displayed on a separate page with checkboxes next to each entry. At this stage, I have se ...

phpmysqlhtml

After refreshing, the base href in the environment is characterized as undefined

Within my angularjs application, I have configured the env.js file as shown below: (function (window) { window.__env = window.__env || {}; // API url window.__env.apiUrl = 'http://aaaaaaa.com/'; // Base url window.__env.baseUrl = '/angula ...

htmlangularjs

Stop Stripe checkout if all other fields are left empty

I am working on a simple "booking" function using stripe and I encountered this issue. Below is my form code: <form id="formid" action="/checkout" method="POST"> <input type="text" name="kurtuma" id="zaza"> <script src="//check ...

javascriptnode.jsformsexpressstripe-payments