How to set background color and imageScaleMode: 'fit´ only for full screen

vvtv01's Avatar

vvtv01

30 May, 2013 10:55 PM

Hi, Is it possible to set background color and imageScaleMode: 'fit´ only for full screen not for regular "in window" mode? (I am using gallery with deep linking...) I want to keep setting of "in window" mode to backgroundless and imageScaleMode: fill

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Jun, 2013 02:09 PM

    Dmitry Semenov's Avatar

    Hi,

    1. In fullscreen slider gets class rsFullscreen.
    2. Image scaling can be changed via JS - http://dimsemenov.com/plugins/royal-slider/documentation/#api you can change options like so: $('.royalSlider').data('royalSlider').st.imageScaleMode = "fill";, Or you can force manual sizing via CSS with help of rsFullscreeen CSS class.

    Dmitry

  2. 2 Posted by vvtv01 on 01 Jun, 2013 06:17 PM

    vvtv01's Avatar

    I have a issue, when I add:

    .rsFullscreen {
    max-width: auto;
    max-height:100%;
    background-color: black;
    }

    It´s not working and I dont know why..

  3. Support Staff 3 Posted by Dmitry Semenov on 01 Jun, 2013 07:59 PM

    Dmitry Semenov's Avatar
  4. 4 Posted by vvtv01 on 01 Jun, 2013 09:55 PM

    vvtv01's Avatar

    Thank you, background color works :) Now it´s time for image scale mode...

  5. 5 Posted by vvtv01 on 06 Jun, 2013 03:14 PM

    vvtv01's Avatar

    Do you have any advice how to do it please? I just need 2 different imagescalemods fit for fullscreen and fill for normal mode. I already have imagescale mode to fill for normal mode... Thank you Dmitry

  6. Support Staff 6 Posted by Dmitry Semenov on 06 Jun, 2013 08:41 PM

    Dmitry Semenov's Avatar

    You should use slider API to implement this, search this forum, there are some similar discussions that might help you, e.g. http://help.dimsemenov.com/kb/royalslider-javascript-api/dynamicall... http://dimsemenov.com/plugins/royal-slider/documentation/#api

  7. 7 Posted by vvtv01 on 06 Jun, 2013 09:43 PM

    vvtv01's Avatar

    And where should I put these codes?

  8. Support Staff 8 Posted by Dmitry Semenov on 08 Jun, 2013 09:43 AM

    Dmitry Semenov's Avatar

    Code from API section should be executed after slider initialization code.

    Dmitry

  9. 9 Posted by vvtv01 on 08 Jun, 2013 11:19 AM

    vvtv01's Avatar

    Hi, I did it with this code:
    <script>
    jQuery(document).ready(function($) {
    var slider = $("#gallery-t-group").data('royalSlider');
              slider.ev.on('rsEnterFullscreen', function() {
                    slider.st.imageScaleMode = "fit-if-smaller";
                    slider.st.imageAlignCenter = true;
                    slider.updateSliderSize(true);
                });
    setTimeout(function() {
            slider.ev.on('rsExitFullscreen', function() {
                slider.st.imageScaleMode = "fill";
                slider.st.imageAlignCenter = true;
                slider.autoScaleSlider= true;
                slider.updateSliderSize(true);
            });
    }, 20);
    });
    </script>

    But I have problem with video in slider, 1st video in fullscreen isn´t centered and 2nd when I am on video slide in FS and I hit FS button it´s not filled again... Images are working fine, problem is just for video...

    What is wrong? :(

  10. 10 Posted by vvtv01 on 08 Jun, 2013 11:43 AM

    vvtv01's Avatar

    I centered video with this CSS:
    .rsFullscreen .rsVideoContainer img {
        margin: 0 !important;
    }

    but not filled video is still the same...

  11. 11 Posted by vvtv01 on 08 Jun, 2013 12:18 PM

    vvtv01's Avatar

    then I tried to edit that code like this:

    var slider = $(".royalSlider").data('royalSlider');
            slider.ev.on('rsEnterFullscreen', function() {
                    slider.st.imageScaleMode = "fit-if-smaller";
                    slider.st.imageAlignCenter = true;
                    slider.updateSliderSize(true);
             });
            slider.ev.on('rsExitFullscreen', function() {
                slider.st.imageScaleMode = "fill";
                slider.st.imageAlignCenter = true;
                slider.autoScaleSlider= true;
                slider.updateSliderSize(true);
            });
    

    And I have only 1 problem now, problem is that the playbutton isn´t centered... Is it clear solution? And do you know how to fix it?

  12. Support Staff 12 Posted by Dmitry Semenov on 10 Jun, 2013 08:15 AM

    Dmitry Semenov's Avatar

    Please upload example somewhere and provide link to it.

    Dmitry

  13. 13 Posted by vvtv01 on 10 Jun, 2013 06:13 PM

    vvtv01's Avatar
  14. Support Staff 14 Posted by Dmitry Semenov on 11 Jun, 2013 07:39 PM

    Dmitry Semenov's Avatar

    Hi,

    Are you testing the issue in Chrome? For some reason I see normal slider (see attachment).

    This might be related to CSS, make sure that size of an image matches size of its viewport.

    Dmitry

  15. 15 Posted by vvtv01 on 11 Jun, 2013 07:43 PM

    vvtv01's Avatar

    Hi, yes I am using chrome, It is OK until you hit FS button FS activate you hit it again to close FS and after that it´s not in the center...

  16. Support Staff 16 Posted by Dmitry Semenov on 11 Jun, 2013 08:05 PM

    Dmitry Semenov's Avatar

    Sorry, missed most important part, try adding such CSS to force 100% height in normal view:

    .royalSlider .rsVideoContainer {
        height: 100%;
    }
    .rsFullscreen .rsVideoContainer {
        height: auto;
    }
    

    Dmitry

  17. 17 Posted by vvtv01 on 11 Jun, 2013 08:10 PM

    vvtv01's Avatar

    Yes! That´s it :) thank you, you are the best, It works :) Thanks again...

  18. Dmitry Semenov closed this discussion on 29 Aug, 2013 06:12 AM.

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