enter fullscreen by clicking image/slide

royalslider's Avatar

royalslider

17 Sep, 2014 05:53 PM

Spent an hour now searching for this. sorry. must be answered before but i cant find it.
How do you make rs enter fullscreen when a slide is clicked.
thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 17 Sep, 2014 07:22 PM

    Dmitry Semenov's Avatar

    Hello,

    var s = $('.royalSlider').data('royalSlider');
    s.ev.on('rsSlideClick', function() {
         s.enterFullscreen();
    });
    

    http://dimsemenov.com/plugins/royal-slider/documentation/#api

  2. 2 Posted by estebandinamarc... on 06 Oct, 2014 09:31 PM

    estebandinamarca's Avatar

    Is working fine, thanks.

    But when full screen is open, if I click the big image, the area turns white (the image disappear), and has a unusual behavior.

    How we can prevent this?

  3. Support Staff 3 Posted by Dmitry Semenov on 07 Oct, 2014 12:14 PM

    Dmitry Semenov's Avatar

    Link to page with issue, please.

  4. 4 Posted by estebandinamarc... on 07 Oct, 2014 02:50 PM

    estebandinamarca's Avatar

    At the moment is in localhost, but an error in Chrome is the following;

    Uncaught TypeError: Cannot read property 'ev' of undefined

    Chilemat.aspx:1701(anonymous function) Chilemat.aspx:1701jjquery.1.11.1.min.js:2k.fireWith jquery.1.11.1.min.js:2m.extend.ready jquery.1.11.1.min.js:2J jquery.1.11.1.min.js:2

  5. Support Staff 5 Posted by Dmitry Semenov on 07 Oct, 2014 06:59 PM

    Dmitry Semenov's Avatar

    Error tells you that #detalle-galeria-fotos element isn't RoyalSlider, or RoyalSlider isn't initialised on it yet.

    Dmitry

  6. 6 Posted by estebandinamarc... on 07 Oct, 2014 07:11 PM

    estebandinamarca's Avatar

    Here is the live example: Example

    1) When fullscreen is opened (by clicking the image), this works fine.
    2) But, inside the fullscreen, when you click the big image, this image disappear, and when you go back (closing the fullscreen), the image is not displayed in the slider.

  7. Support Staff 7 Posted by Dmitry Semenov on 07 Oct, 2014 07:20 PM

    Dmitry Semenov's Avatar

    Well, just add some flag and don't call enterFullscreen method when in fullscreen.

  8. 8 Posted by estebandinamarc... on 07 Oct, 2014 07:34 PM

    estebandinamarca's Avatar

    Ok Thanks...
    And what about this console error?. Is about the same?

    Uncaught TypeError: Cannot read property 'holder' of undefined

  9. 9 Posted by estebandinamarc... on 07 Oct, 2014 08:04 PM

    estebandinamarca's Avatar

    Sorry for ask this, maybe is not your problem, but I don't know if this is ok:

    var abrir = $('.royalSlider').data('royalSlider');
            abrir.ev.on('rsSlideClick', function () {
                abrir.enterFullscreen();
            });
            if (abrir.isFullscreen) {
                abrir.ev.on('rsSlideClick', function () {
                    abrir.next();
                });
            }
    
  10. Support Staff 10 Posted by Dmitry Semenov on 08 Oct, 2014 06:11 AM

    Dmitry Semenov's Avatar

    You're probably looking for something like this:

    var abrir = $('.royalSlider').data('royalSlider');
            abrir.ev.on('rsSlideClick', function () {  
                if(abrir.isFullscreen) {
                    abrir.next();
                } else {
                     abrir.enterFullscreen();
                }
                
            });
    
  11. 11 Posted by estebandinamarc... on 08 Oct, 2014 08:22 PM

    estebandinamarca's Avatar

    Yes!, is working fine. There is a minimal issue with this, I have been testing, this is the result:

    Chrome:
    All is ok.-

    Firefox:
    Error, when you close fullscreen, with "minimize button" (Top right), the gallery is not showing the current image.-
    Instead, when you go back with browser (back button), is all ok.-

    IE 11:
    The same unusual behavior that Firefox.-


    This is the final code, there is a online version here: Example (Please test in firefox and IE)

            // CLICK TO OPEN FULLSCREEN AND CLOSE WITH BROWSER BACK BUTTON
    
            var slider = $(".royalSlider").data('royalSlider');
            var closedByBackButton;
    
            slider.ev.on('rsEnterFullscreen', function () {
                closedByBackButton = false
                window.location.hash = "#pantallacompleta";
    
                //alert(window.location.hash);
    
                setTimeout(function () {
                    $(window).bind('hashchange', function (event) {
                        closedByBackButton = true;
                        slider.exitFullscreen();
    
                        $(window).unbind('hashchange');
                    });
                }, 50);
    
            });
    
            slider.ev.on('rsExitFullscreen', function () {
                if (!closedByBackButton) { window.history.back(); }
            });
    
            slider.ev.on('rsSlideClick', function () {
                if (slider.isFullscreen) {
                    slider.next();
                } else {
                    slider.enterFullscreen();
                }
            });
    
  12. Support Staff 12 Posted by Dmitry Semenov on 09 Oct, 2014 08:38 PM

    Dmitry Semenov's Avatar

    I forgot $(window).unbind('hashchange'); in rsExitFullscreen.

  13. 13 Posted by estebandinamarc... on 10 Oct, 2014 11:43 AM

    estebandinamarca's Avatar

    Perfect! Thanks. This is the final code:

            // CLICK TO OPEN FULLSCREEN AND CLOSE WITH BROWSER BACK BUTTON
            var slider = $(".royalSlider-detalle").data('royalSlider');
            var closedByBackButton;
    
            slider.ev.on('rsEnterFullscreen', function () {
                closedByBackButton = false
                window.location.hash = "#pantallacompleta";
    
                setTimeout(function () {
                    $(window).bind('hashchange', function (event) {
                        closedByBackButton = true;
                        slider.exitFullscreen();
    
                        $(window).unbind('hashchange');
                    });
                }, 50);
            });
    
            slider.ev.on('rsExitFullscreen', function () {
                $(window).unbind('hashchange');
                if (!closedByBackButton) { window.history.back(); }
            });
    
            slider.ev.on('rsSlideClick', function () {
                if (slider.isFullscreen) {
                    slider.next();
                } else {
                    slider.enterFullscreen();
                }
            });
    
  14. 14 Posted by tnardine on 31 Oct, 2017 05:49 AM

    tnardine's Avatar

    Hello Dmitry,

    I am having trouble adding the script you suggest:
    var s = $('.royalSlider').data('royalSlider'); s.ev.on('rsSlideClick', function() { s.enterFullscreen(); });

    It works, but there is a glitch. When you click the slider to go fullscreen a problem happens. When in full screen if you click the black background everything breaks. Can you please help me?

    Link here:
    http://tommynardini.com/NEW/

  15. Support Staff 15 Posted by Dmitry Semenov on 31 Oct, 2017 02:53 PM

    Dmitry Semenov's Avatar

    @tnardine, make sure that you don't call enterFullscreen method while in fullscreen mode, you probably looking for something like:

                if (s.isFullscreen) {
                    s.exitFullscreen();
                } else {
                    s.enterFullscreen();
                }
    

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