Lightbox fails to load when using RoyalSlider

I have integrated RoyalSlider and Lightbox.js into my project, but for some reason, the functionality is not working properly. When clicking on an image, it should pop up in the lightbox, but the image fails to load.

You can view a demo of the site at . Scroll to the bottom of the page to see a horizontal slider. Clicking on an image does not display the full image as expected.

HTML:

<section id="homeGallery" class="hidden-xs">
    <div id="homeGallerySlider" class="rsDefault">
        <div class="image-set">
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-1.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-2.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-3.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-4.jpg"></a>
        </div>
        <div class="image-set">
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-5.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-6.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-7.jpg"></a>
            <a href="#" data-lightbox="gallery"><span class="imgHover"><i class="fa fa-picture-o"></i></span><img src="img/opa-home-gallery-1.jpg"></a>
        </div>
    </div>
</section>

JavaScript:

// Home Page Gallery Slider
jQuery(document).ready(function($){
    $('#homeGallerySlider').royalSlider({
        keyboardNavEnabled: false,
        autoScaleSlider: false,
        imageAlignCenter: false,
        imageScalePadding: 0,
        arrowsNav: true,
        arrowsNavAutoHide: false,
        randomizeSlides: false,
        slidesOrientation: 'horizontal',
        usePreloader: false,
        navigateByClick: false,
        slidesSpacing: 0,
        controlNavigation: 'none',
        imageScaleMode: 'none',
        loop: true,
        slideDrag: false
    });
});
javascriptjqueryhtmlcsslightbox2

Answer №1

Try out the following code snippet:

var slider = $('#--your-slider-id--').data('royalSlider');
    slider.ev.on('rsSlideClick', function (event, originalEvent) {
    //console.log(this);
    $.fancybox( this.currSlide.bigImage );
});

Don't forget to replace --your-slider-id-- with your actual slider ID, like #homeGallerySlider

Best regards, Ciprian

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

Is it possible to dynamically adjust the Semantic UI Progress bar according to the data stored in mongoDB?

I am facing an issue with displaying the progress of a job on the UI in real-time. Every 5 seconds, I retrieve the job progress and store it in mongoDB. I tried using Semantic UI progress bar in my meteor project, but the progress is not incrementing as ex ...

javascriptjquerymongodbmeteorsemantic-ui

Is it possible to implement a universal margin for the homepage design?

I'm working on a landing page where each section needs the same padding on the left and right but with different background colors. Is there a way to apply this consistent padding to the entire page without affecting the individual section colors? Any ...

cssflexboxfrontendtailwind-cssweb-frontend

I'm looking for a tag cloud widget that can handle JSON objects. Any suggestions?

Looking for recommendations on widgets that can generate a tag cloud using JSON objects. I have an array of JSON objects and would like to know the most effective method for creating a tag cloud with them. Thanks in advance! =) ...

javascriptjsontag-cloud

Troubleshooting issues with JavaScript progress bar functionality

I have implemented a progress bar using HTML5, JavaScript and Ajax to showcase file uploads in PHP. The issue I am facing is that the progress bar is not displaying the progress correctly. In addition to that, the echo statements in the PHP code are no ...

javascriptphpajaxhtml

Exploring the potential of utilizing records within deepstream.io

Lately, I've been delving into the world of records and I find myself pondering on the practical limitations when it comes to the size of a json structure. Is there a recommended maximum length? Can you store an entire chat history as an (anonymous) r ...

javascriptjsondeepstream.io

The program is encountering an error message indicating the use of an undefined constant

I'm just diving into the world of angularjs and running into some roadblocks while trying to set up a basic checklist. <html lang="en" ng-app> <body> <div ng-controller="IdController" class="id-contain"> <ul> <li ng-r ...

javascriptphpangularjslaravel

Implementing a feature that ensures html elements are transparent in a PDF conversion

I am in the process of converting a webpage into a format that is easily printable as a PDF, while ensuring that it maintains the same appearance. Many tools for printing to PDF do not support background images or colors, so I am attempting to overcome thi ...

htmlcsspdfpdf-generation

coming back to the cordova application after using the browser

I recently developed a basic app using the ionic framework. There is a feature in the app that opens an external payment gateway in a system browser to process payments. After successful payment, a script on my server sends an HTML page to display a succes ...

javascriptcordovabrowserionic-framework

Reduce the use of javascript by incorporating NPM specifically after publishing instead of during the building process

My goal is to minify JS files using NPM commands, but I want the minify command to only run after Post Publish and not on Build. Unfortunately, it currently runs after both build and publish. In my Package.json file, I have the following code: "scripts" ...

javascript.netmsbuildnpmcontinuous-integration

Display and conceal specific raw details data dynamically upon clicking?

I am looking to display and hide table row details dynamically with every button click. However, whenever I click on the span glyphonic icon, all details data in the tr's are opened by default. What can I do to only make this data visible for the elem ...

javascriptangularjsangular-ui-bootstrapcamundacamunda-modeler

CSS Tricks: Placing a Panel Just Off the Page Edge

Having difficulty adjusting a panel slightly off the page like this: click here for image Attempted using width: 120% While it does work, resizing causes the image to move from its original position. I want it to remain consistent on different screens. ...

htmlcssbootstrap-4bootstrap-grid

Adding to and retrieving data from an array

I am relatively new to the world of JavaScript and jQuery, and I have spent the last three days working on a script. Despite my efforts to find a solution by searching online, I have been unsuccessful so far. It seems like my search skills are lacking. My ...

javascriptjqueryarraysjquery-loadjquery-append

Restrict the frequency of requests per minute using Supertest

We are utilizing supertest with Typescript to conduct API testing. For certain endpoints such as user registration and password modification, an email address is required for confirmation (containing user confirm token or reset password token). To facilit ...

javascripttypescriptsupertestweb-api-testing

What is the best way to combine an array of objects into a single object?

I have a set of objects that I want to convert into objects with specific key names, following the format {key}{index) const input = [ { item: 'Apple', amount: '3' }, { item: 'Banana', ...

javascriptarrays

Unleashing the power of multiple GET requests in node.js/express through

I have a route where I need to make multiple calls to the API server in order to gather all the necessary data. The code is working, but as I add a third call to the server, it's becoming hard to manage and read. I suspect that there's a better ...

javascriptnode.jsexpress

Can someone explain the process of unescaping characters in an API response to me?

I have created an application that leverages AngularJS to pull data from the WP Rest API V2. The response includes escaped characters, like the example below: "excerpt": { "rendered": "<p>When we go shopping, we encounter many different labeling ...

javascriptangularjsjsonwordpressapi

Stage setting timeout for the playwright

const test = defaultTest.extend({ audit: async ({ page }) => { await page.screenshot({ path: 'e2e/test.png' }); console.info('audit done!'); }, }); // ...more code test.only('audit', async ({ page, mount, audi ...

javascripttypescriptplaywrightplaywright-typescript

Ensure that the page is edited before being shown in the iframe

Is it possible to remove a div from an HTML page within an iFrame? The code below fetches an HTML page and displays it in an iframe. Is there a way to remove the specified div from the fetched HTML page? <script type="text/javascript"> (function(){ ...

javascriptjqueryhtmliframe

What is causing my package bundler to constantly fail, even on the most basic tasks?

In my current project, the main index.html file includes a <link rel="stylesheet" href="./styles/styles.scss"> to import my styles. However, when I attempt to run parcel index.html, an error message pops up stating: .nvm/versions/node/v10.16.3/lib/no ...

javascriptnode.jsparceljs

Assign HTML Form Input Value to JavaScript Variable

Is there a way to display the user's input in a form before they submit it? I have set up text elements on the page with specific IDs, but when I try to assign the values of these elements to the input fields, it doesn't seem to be working as exp ...

javascripthtml