Slider size problem

zabomike's Avatar

zabomike

30 Jan, 2020 12:02 PM

Hi Dimitry,
I recently wrote with a problem with a new site, new slider - this problem was fixed quickly.
Now i am writing regarding a slider i bought a while ago (probably more than 6 months) for a different site but the clients never got around implementing until this week. It would be great i you still could help here.

I placed the complete slider in a hidden div in the template file to show the slider, only when a link in text is clicked (this is maybe not really recommended but the designer of the site insisted on that). Showing the <div> on click works, but the slider is always only about 60px high (auto-scale is enabled to get aspect ratio 5/3), if i resize the browser window only a little the slider is displayed perfectly right, also after i enter and exit full-screen mode.
when i change slider settings and enter for example a fixed image size it works somehow, but that does not work with the layout.
i have found one article in the knowledge base that might have something to do with that problem, but i am neither sure, wether this is really the case and how to implement/adapt the code it presents:
http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks

page is this:
https://schloss-weissenbrunn.de/historie
link is "Bilder" right at the top after the headline
i have not added the exit-button, nor formatted captions and slide-count yet.

in the end it is supposed to somehow look like this page:
https://schloss-weissenbrunn.de/impressionen/

thank you,
Mike

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Jan, 2020 12:55 PM

    Dmitry Semenov's Avatar

    Hello,

    it is indeed related to http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid...

    You need to update size of slider when it's visible (after link is clicked), like this:

    $('.royalSlider').royalSlider('updateSliderSize', true);
    

    or like this (which will trigger global jquery resize event):

    $(window).trigger('resize');
    
  2. 2 Posted by zabomike on 30 Jan, 2020 01:30 PM

    zabomike's Avatar

    thank you for the quick reply - how do i use it right, where does it have to go exactly- i have added this code in my js file:
    jQuery('.show_slider').click(function () {
        jQuery('#historie').toggle('fast');
    });
    jQuery('.show_slider').on( "click", function() {
    $('.royalSlider').royalSlider('updateSliderSize', true);
    });
    first part is to show the div - works, second part has no effect
    thank you

  3. Support Staff 3 Posted by Dmitry Semenov on 30 Jan, 2020 02:32 PM

    Dmitry Semenov's Avatar

    I suppose something like this should help:

    jQuery('.show_slider').click(function () {
        jQuery('#historie').toggle('fast');
        jQuery('.royalSlider').royalSlider('updateSliderSize', true);
    });
    
  4. 4 Posted by zabomike on 30 Jan, 2020 03:09 PM

    zabomike's Avatar

    This works, thanks a lot, great support!
    (btw i am sure this was my first guess, but i was either too impatient and forgot uploading or something or had a typo)

    there is one more thing about this website, concerning all sliders there -only if it is easy to fix and you have the time:
    i removed the caption div from the slider-wrapper to place it outside the slider by adding the neccessary code to functions.php, as the clients are very careful about the photographs ... this works well, the caption now of course cannot be displayed in fullscreen mode - is there any way to move the caption-div back into the slider, when entering fullscreen-mode?
    thank you

  5. Support Staff 5 Posted by Dmitry Semenov on 30 Jan, 2020 06:26 PM

    Dmitry Semenov's Avatar

    You may use JS events like rsEnterFullscreen or rsExitFullscreen and move the caption element in them.

  6. 6 Posted by zabomike on 02 Feb, 2020 01:49 PM

    zabomike's Avatar

    i tried to use some code, i found in the knowledge base, containing these elements, to simply toggle/show a hidden div with a higher z-index than the slider - works theoretically, also would look good, but i don't get the js working - I tried these three options in my js-file, none of them works - can you tell me what i get wrong?

    1 - display block/none

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    document.getElementById("slider-caption-fullscreen").style.display = "block";
    });
    would be same with rsexit ...

    2 - also odisplay ...

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    jQuery('#slider-caption-fullscreen').toggle('fast');
    });

    slider.ev.on('rsExitFullscreen', function() {
    jQuery('#slider-caption-fullscreen').toggle('fast');
    });

    3 - visibility (also changed in css of course)

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    var x = document.getElementById('slider-caption-fullscreen');
      if (x.style.visibility === 'hidden') {
        x.style.visibility = 'visible';
      } else {
        x.style.visibility = 'hidden';
      }
    });

  7. Support Staff 7 Posted by Dmitry Semenov on 03 Feb, 2020 05:56 AM

    Dmitry Semenov's Avatar

    You can't do this just via CSS, if you moved caption outside, you'll need to move it inside while slider enters fullscreen. For example:

    // moves caption to some other container
    $('.rsGCaption').appendTo('.some-outer-container');
    
    // moves caption inside the slider
    $('.rsGCaption').appendTo('.rsOverflow');
    

    Hope it helps.

  8. 8 Posted by zabomike on 03 Feb, 2020 08:41 AM

    zabomike's Avatar

    good morning,
    thank you for the reply -
    i did not try it using just css, this was rather meant as some kind of workaround, making a hidden container visible when slider enters fullscreen.
    but still, the new code does not work either, but i think the problem is somewhere else - i have changed to this (just "enter" for testing):

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    $('.rsGCaption').appendTo('.rsOverflow');
    });

    placed in my additional js - nothing happens, but chrome shows an error message in console:
    uncaught type error
    this line "var slider = $('.royalSlider').data('royalSlider');"
    $ is not a function ...

    do i have to place the code inside something like "document.ready"?
    sorry, maybe the first piece of code is entirely wrong - i don't get it right now ...

  9. Support Staff 9 Posted by Dmitry Semenov on 03 Feb, 2020 09:28 AM

    Dmitry Semenov's Avatar

    You may wrap all code with:

    jQuery(document).ready(function($) { 
    
      // code
    
    });
    
  10. 10 Posted by zabomike on 03 Feb, 2020 09:45 AM

    zabomike's Avatar

    if i do that, slider is completely gone - not displayed on any page

    code:
    jQuery(document).ready(function($) {
    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsEnterFullscreen', function() {
    $('.rsGCaption').appendTo('.rsOverflow');
    });
    });

    screenshot of error message in chrome is attached
    page is set back to working version, ie without the js-code
    maybe i have to leave caption in the slider container all the way ...

  11. Support Staff 11 Posted by Dmitry Semenov on 03 Feb, 2020 10:59 AM

    Dmitry Semenov's Avatar

    If you're not experienced in JS, you may use filter to place code right after slider initialization - http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

  12. 12 Posted by zabomike on 03 Feb, 2020 12:20 PM

    zabomike's Avatar

    thank you, this works.

  13. zabomike closed this discussion on 03 Feb, 2020 12:20 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