Full Screen

jonathanentila.tls's Avatar

jonathanentila.tls

19 Nov, 2018 07:59 AM

Hi, We are experiencing some error I think.
When we tried to full view the image please see screenshot attached.

Regards,

  1. Support Staff 1 Posted by Dmitry Semenov on 19 Nov, 2018 11:16 AM

    Dmitry Semenov's Avatar

    Hello,

    This can happen if your header has too high z-index, or because of your theme structure.

    You may either reduce z-index via CSS. Or hide header element while slider in fullscreen, for example:

    // Add to your theme functions.php
    // Hides header element when slider is in fullscreen mode
    function rs_hide_in_fullscreen() {
        ?>
    
        var slider = $('.royalSlider').data('royalSlider');
        slider.ev.on('rsEnterFullscreen', function() {
            $('#header-wrap').hide();
        });
        slider.ev.on('rsExitFullscreen', function() {
            $('#header-wrap').show();
        });
    
        <?php
    }
    add_action('new_rs_after_js_init_code', 'rs_hide_in_fullscreen');
    

    (where #header-wrap is CSS selector of an element that you wish to hide)

    Dmitry

  2. 2 Posted by jonathanentila.... on 20 Nov, 2018 02:09 AM

    jonathanentila.tls's Avatar

    Is there a way that if they click the image it will just view all the
    slider? Something like this please view the URL.
    https://www.luxuryretreats.com/vacation-rentals/mexico/los-cabos/the-corridor-punta-ballena/esperanza-2-bedroom-villa-113664

    Regards,

  3. Support Staff 3 Posted by Dmitry Semenov on 20 Nov, 2018 06:38 AM

    Dmitry Semenov's Avatar

    There is no such option, but it can be done via JS api, for example:

    // Add to your theme functions.php
    // Click on slide toggles fullscreen
    function rs_click_to_fullscreen() {
        ?>
    
        var slider = $('.royalSlider').data('royalSlider');
        slider.ev.on('rsSlideClick', function() {
            if (slider.isFullscreen)
                slider.exitFullscreen();
            else
                slider.enterFullscreen();
        });
    
        <?php
    }
    add_action('new_rs_after_js_init_code', 'rs_click_to_fullscreen');
    
  4. 4 Posted by jonathanentila.... on 20 Nov, 2018 08:33 AM

    jonathanentila.tls's Avatar

    Hi,

    Thank you so much for your help.
    Last question, how do we add bullets on fullscreen view?
    http://tpw2019.wpengine.com/property/amarapura/
    Also would like to change the icons of the arrow align the icon of
    fullscreen view to right side?

    Kind Regards

  5. Support Staff 5 Posted by Dmitry Semenov on 20 Nov, 2018 01:22 PM

    Dmitry Semenov's Avatar

    Last question, how do we add bullets on fullscreen view?

    You can enable bullets in "Thumbnails,tabs,bullets" section of slider options. To show them just in fullscreen you'll need to use CSS and hide them in normal state, e.g.:

    .rsNav {
      opacity: 0;
    }
    .rsFullscreen .rsNav {
      opacity: 1;
    }
    

    Also would like to change the icons of the arrow align the icon of fullscreen view to right side?

    Skins can be modified just via CSS http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-add...

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Screen_Shot_2018-11-19_at_2.58.13_PM.png 4.53 MB

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