Retrieve the data-src attribute from the lightGallery plugin

I have integrated the lightgallery plugin into my website from

Currently, I am struggling to retrieve the data-src value when an image is clicked.

The basic HTML structure is as shown below:

<div id="work-grid" class="grid wow fadeIn animated">
   <div class="ecp-thumbnail element-item landing" data-iframe="true"  data-src="image/landingpages/alta_1.jpg">
   <img class="img-responsive img-thumbnail" src="image/landingpages/thumb_alta_1.jpg" />
  </div>
</div>

Here is the relevant JavaScript code:

var $workGrid = $("#work-grid");

$workGrid.lightGallery({
    mode: 'lg-fade',
    cssEasing: 'cubic-bezier(0.25, 0, 0.25, 1)',
    download: false,
    share: false,
    selector: 'this'
});

$workGrid.on('onBeforeOpen.lg', function (event, prevIndex, index) {
    alert($workGrid.data('src'));
});

Despite adding selector: 'this', I am unable to extract the data-src attribute value of the selected image. Can someone guide me on how to properly utilize this functionality?

I would greatly appreciate any assistance provided.

javascriptlightgallery

Answer №1

If you're looking to find the index in this situation, I managed to achieve it by utilizing the following code snippet:

$workGrid.on('onBeforeSlide.lg', function (event, index ) {

alert($(".ecp-thumbnail").eq(index).attr('data-src'));

});

Answer №2

Check out this code snippet

      var $gallery =  $('#lightgallery').lightGallery({
            animateThumb: false,
            showThumbByDefault: false,
            controls:false
        });

        $gallery.lightGallery();
        $gallery.on('onBeforeSlide.lg',function(){
        let source =  $gallery.data('lightGallery').$items.eq(0).data('src');
            fetchHighResImages(source);
        });

You can also use the function fetchHighResImages(src);

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

Completing online form text entries in WebView without the need for identifying elements

I am currently working on a project to automate filling out an online login form using local string variables. This is the progress I have made so far: web = (WebView) findViewById(R.id.webview); WebSettings webSettings = web.getSettings() ...

javajavascriptandroid

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

javascriptnode.jsnpmvisual-studio-code

"Upload a video file and use JavaScript to extract and save the first frame as an image

I have a webpage where users can upload a video file, and the page will generate a thumbnail based on a timestamp provided by the user. Currently, I am focusing on generating the thumbnail from the FIRST frame of the video. Here is an example of my progr ...

javascripthtmltypescript

What's the best approach for revalidating data with mutate in SWR?

Whenever a new album is created in my app, the post request response includes an updated list of all albums. To enhance the user experience, I wanted the newly created content to automatically show up without requiring a page refresh. Although I am famil ...

javascriptreactjstypescriptnext.jsswr

Retrieve data with a web API

I am currently developing a web API to fetch data from a mock database using express My goal is to retrieve a JSON list containing all portfolios and their corresponding positions from the database module. Is there a way to structure the returned data so ...

javascriptnode.jsexpress

Having trouble accessing array elements in react components

When retrieving JSON data for a single student from the server in my React application, I am able to access this.state.info.Firstname but encountering difficulty accessing this.state.info.Father.Firstname. How can I access this information? This is my Rea ...

javascriptjsonreactjs

Challenges with Scaling HTML5 Video onto Canvas

Attempting to extract a frame from an html5 video to generate a thumbnail, but encountering peculiar outcomes when the image is rendered onto canvas. The issue lies in the fact that the canvas displays only a greatly magnified portion of the video! Refer ...

javascriptjqueryhtml5-canvashtml5-video

Enhancing React Flow to provide updated selection and hover functionality

After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...

javascriptcssreactjstypescript

Navigating to a different directory using Node.js and ExpressJS route mapping

I'm struggling with setting up routing using ui.router. This is the structure of my folders: https://i.stack.imgur.com/Fu0A9.png In the app.js file within the javascripts folder, I have the following code: var app = angular.module('testing&ap ...

javascriptangularjsnode.jsexpressnpm

What's the best way to display a bootstrap modal window popup without redirecting to a new page?

I am having trouble implementing a modal window that will display validation errors to the user when they submit a form. Currently, the window is opening as a new view instead of overlapping the existing form's view. How can I adjust my code so that t ...

javascriptc#ajaxasp.net-mvcasp.net-core

Explain the concept of render hijacking in react technology

After learning about High Order Components (HOC), I came across the concept of render hijacking. Can someone please explain what exactly render hijacking entails? ...

javascriptreactjsreact-native

Sending data to a React Dialog component using the OnClick event

I am a beginner learning React.js and currently experimenting with passing parameters to a dialog box using onclick events. <IconButton className={classes.approvebutton} onClick={() => handleDialogClick("approve",1)}> <ThumbU ...

javascriptreactjsdialogmaterial-ui

Sending an array from the front-end to the back-end in Laravel with JavaScript

I am experiencing difficulty passing a objs array to a function in a Laravel controller using ajax. Unfortunately, I am not receiving any data after the post request. <script> var itemCount = 0; var objs=[]; $(document).read ...

javascriptphpajaxmodel-view-controllerlaravel-5

Using Laravel Blade Variables in JavaScript Code

Trying to access a variable within blade syntax has posed a challenge for me: success: function(resp) { console.log(resp) var MsgClass = 'alert-danger'; $("#overlay").hide(); ...

javascriptajaxlaravel

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

How can I efficiently retrieve the server time in JavaScript using a web browser?

Is there a faster way to synchronize client-side time with server time in JavaScript? I found this solution on Stack Overflow, which seems good, but are there any other ideas that might be quicker? ...

javascriptajaxhttpclient-serverclock-synchronization

Is it possible to configure Lambda NodeJS 12.x flags (like --experimental-modules) when using AWS SAM local start-api?

When setting up my nodejs server, I chose to use ES6 module syntax: package.json "type": "module" So far, running my server locally as a nodejs process has been successful. For example: "scripts": { "dev": "npm outdated ; nodemon --experimental-modul ...

javascriptnode.jsaws-lambdaes6-modulesaws-sam-cli

Guide on implementing jQuery Validation plugin with server-side validation at the form level

Does anyone have a suggestion for how to handle server-side validation errors that occur after passing the initial client-side validation on a form? $("#contact_form").validate({ submitHandler: function(form) { $.ajax({ type: 'POST', ...

javascriptjqueryvalidationjquery-validate

How do browsers typically prioritize loading files into the cache?

Out of curiosity, I wonder if the categorization is determined by file names or byte code? It's possible that it varies across different browsers. Thank you! ...

javascripthtmlcssbrowsercross-browser

Error: Unable to access the lexical declaration 'useStyles' before it has been initialized in the React Collapse Component. This issue occurred while trying to fetch data using axios in the Material-

I am facing an issue while trying to display data fetched from the backend (array with objects) and hide a portion of it under a collapsible button using Material-UI in React. The code works perfectly when all lines are written within a single component ca ...

javascriptreactjsreact-hooksmaterial-ui