Conflict

info's Avatar

info

28 Jun, 2021 06:26 PM

Hi,

I implemented your gallery in a bootstrap theme. Unfortunately "full screen" does not work. Probably a jquery conflict. This error is displayed:

DevTools failed to load source map: Could not load content for []bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

https://www.autopark-hofmann.de/#facts

Can you help?
Thanks and best regards
Kathleen

  1. Support Staff 1 Posted by Dmitry Semenov on 28 Jun, 2021 07:13 PM

    Dmitry Semenov's Avatar

    Hello,

    You have z-index and transform on the parent element of the slider, which prevents it from overlapping the content (specifically <div class="container aos-init aos-animate" data-aos="fade-up">).

    Either adjust it, or use the initialization code below (it moves the slider element to the document root right before fullscreen is entered).

    jQuery(document).ready(function($) {
      $('#gallery-1').royalSlider({
        fullscreen: {
          enabled: true,
          nativeFS: true
        },
        controlNavigation: 'thumbnails',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 850,
        loop: false,
        imageScaleMode: 'fit-if-smaller',
        navigateByClick: true,
        numImagesToPreload:2,
        arrowsNav:true,
        arrowsNavAutoHide: true,
        arrowsNavHideOnTouch: true,
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        globalCaption: false,
        globalCaptionInside: false,
        thumbs: {
          appendSpan: true,
          firstMargin: true,
          paddingBottom: 4
        }
      });
    
        var sliderEl = $('#gallery-1');
        var sliderInstance = sliderEl.data('royalSlider'); 
        var parentEl;
        sliderInstance.ev.on('rsEnterFullscreen', function() {
            if (!parentEl) {
              parentEl = sliderEl.parent();
            }
            $('body').append(sliderEl);
        });
        sliderInstance.ev.on('rsExitFullscreen', function() {
            if (parentEl) {
              parentEl.append(sliderEl);
            }
        });
    
    });
    
  2. 2 Posted by info on 29 Jun, 2021 10:28 AM

    info's Avatar

    Thank you very much. It works :-)

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac