Full screen mode not working when wrapped with css transitions

ludwig.arcache's Avatar

ludwig.arcache

14 Jun, 2019 05:38 PM

Hello,

I really appreciate if you can help me with this : https://www.woodandgas.com/natural-stones-c-102_141.html
Full screen mode not working.

I tried to remove the Divs around the gallery, it worked only when I remove them all.

Thansk

  1. Support Staff 1 Posted by Dmitry Semenov on 14 Jun, 2019 06:25 PM

    Dmitry Semenov's Avatar

    Hello,

    Parent elements of the slider (.flip-container, .flipper ...) have transform styles (transform-style, perspective, ...), which create a new stacking context that prevents the fixed-positioned element from stretching to the window.

    If you can't remove them or remove the styles, you may use API to move slider element somewhere else

    var slider = $('.royalSlider').data('royalSlider');
        slider.ev.on('rsEnterFullscreen', function() {
    
        });
        slider.ev.on('rsExitFullscreen', function() {
    
        });
    
  2. 2 Posted by ludwig.arcache on 14 Jun, 2019 06:34 PM

    ludwig.arcache's Avatar

    Hi,

    I tried to insert

    <script>
    var slider = $('.royalSlider').data('royalSlider');
        slider.ev.on('rsEnterFullscreen', function() {

        });
        slider.ev.on('rsExitFullscreen', function() {

        });
    </script>

    Just before the gallery but it didn't work, i don't have js knowledge, i don;t know how to use it.

    All the best,

  3. Support Staff 3 Posted by Dmitry Semenov on 15 Jun, 2019 04:48 AM

    Dmitry Semenov's Avatar

    If you aren't experienced in JS - consider adjusting CSS.

    But a basic example of code that moves element outside looks like this:

    $('.royalSlider').each(function() {
      var sliderInstance = $(this).data('royalSlider'); 
      sliderInstance.ev.on('rsEnterFullscreen', function() {
        sliderInstance.fsParent = sliderInstance.slider.parent();
        sliderInstance.slider.appendTo(document.body);
      }); 
      sliderInstance.ev.on('rsExitFullscreen', function() {
        sliderInstance.slider.appendTo(sliderInstance.fsParent);
      }); 
    });
    

    Also, you have two different versions of jQuery on one page, keep just one, the latest one.

  4. 4 Posted by ludwig.arcache on 15 Jun, 2019 01:32 PM

    ludwig.arcache's Avatar

    Hello,

    I tried the script but still having the same problem.
    I know it's not because of RoyalSlider plugin but if you have some time, I appreciate your support.

    Big thanks

  5. Support Staff 5 Posted by Dmitry Semenov on 15 Jun, 2019 04:51 PM

    Dmitry Semenov's Avatar

    Make sure that you add it right after slider initialization (after $('.slider').royalSlider({ ... }); call)

  6. 6 Posted by ludwig.arcache on 16 Jun, 2019 07:29 PM

    ludwig.arcache's Avatar

    When I add it like you asked me just after slider initialization the design have changed, meaning its working but all the page is broken. I;m sure there is a small details missing. The script now is like this

    ```
    <script id="addJS">
    $321( document ).ready( function () {
    $321( '.royalSlider-projects' ).each( function () {
    var sliderInstance = $( this ).data( 'royalSlider' );
    sliderInstance.ev.on( 'rsEnterFullscreen', function () {
    sliderInstance.fsParent = sliderInstance.slider.parent();
    sliderInstance.slider.appendTo( document.body );
    } );
    sliderInstance.ev.on( 'rsExitFullscreen', function () {
    sliderInstance.slider.appendTo( sliderInstance.fsParent );
    } );
    } );

    $321( '.royalSlider-projects' ).royalSlider( {
    fullscreen: {
    enabled: true,
    nativeFS: true
    },
    controlNavigation: 'none',
    autoScaleSlider: true,
    autoScaleSliderWidth: 900,
    autoScaleSliderHeight: 900,
    loop: false,
    imageScaleMode: 'fit-if-smaller',
    numImagesToPreload: 1,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    imageScalePadding: false,
    navigateByClick: false
    } );
    } );
    </script>
    ```

  7. Support Staff 7 Posted by Dmitry Semenov on 17 Jun, 2019 03:32 PM

    Dmitry Semenov's Avatar

    It should be:

    $321( document ).ready( function () { 
    
      $321( '.royalSlider-projects' ).royalSlider( { 
        fullscreen: { 
          enabled: true, 
          nativeFS: true 
        }, 
        controlNavigation: 'none', 
        autoScaleSlider: true, 
        autoScaleSliderWidth: 900, 
        autoScaleSliderHeight: 900, 
        loop: false, 
        imageScaleMode: 'fit-if-smaller', 
        numImagesToPreload: 1, 
        arrowsNav: true, 
        arrowsNavAutoHide: false, 
        imageScalePadding: false, 
        navigateByClick: false 
      }); 
    
      $321('.royalSlider-projects').each( function () { 
        var sliderInstance = $321(this).data( 'royalSlider' ); 
        sliderInstance.ev.on( 'rsEnterFullscreen', function () { 
          sliderInstance.fsParent = sliderInstance.slider.parent(); 
          sliderInstance.slider.appendTo( document.body ); 
        }); 
        sliderInstance.ev.on( 'rsExitFullscreen', function () { 
          sliderInstance.slider.appendTo( sliderInstance.fsParent ); 
        }); 
      });
    
    });
    
  8. 8 Posted by ludwig.arcache on 17 Jun, 2019 07:46 PM

    ludwig.arcache's Avatar

    Thank you sooo much.

  9. ludwig.arcache closed this discussion on 17 Jun, 2019 07:46 PM.

Comments are currently closed for this discussion. You can start a new one.

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