Prevent Thumbnail movement when all thumbnail are visible

mr.henry.kiss's Avatar

mr.henry.kiss

04 Dec, 2012 01:52 AM

Hello,

I have removed the thumbnails (.rsNav) from the slider (.royalSlider) and re-inserted them into the DOM. Works well. I am loving royalSlider so far. In their new position all of the thumbnails are shown, instead of a sliding subset when their width was restricted by .royalSlider's own width. One of the issues I am having is that the thumbnails still slide. This is a problem since the thumbnails are being pushed outside the bounds of .rsNav. Of the six thumbnails that were originally visible, only three and a half remain visible by the time the last slide is shown.

How can prevent this from happening?

Thanks,
Wayne

  1. 1 Posted by mr.henry.kiss on 04 Dec, 2012 02:55 AM

    mr.henry.kiss's Avatar

    Hi,

    Two more things that might be worth mentioning:

    The royalSlider is in a colorbox, mirroring the example that was provided (Thanks!)
    If I go to fullscreen, and return back to the colorbox overlay, the thumbnails do not move as I browse the slides.

    Hope that helps,
    Wayne

  2. Support Staff 2 Posted by Dmytro Semenov on 04 Dec, 2012 07:38 AM

    Dmytro Semenov's Avatar

    Hi,

    Can't tell you anythng without looking at actual page, please send me alink or attach files to message.

    Dmitry

  3. 3 Posted by mr.henry.kiss on 04 Dec, 2012 07:58 AM

    mr.henry.kiss's Avatar

    Hi,

    Please review the messy work in progress here: http://outlinegraphics.com/dmitry/home.html

    The only configured colorbox/royalSlider is from the view image in the top center.

    Aside from the unwanted thumbnail sliding, the only colorbox/royalSlider issue left for me is the unwanted margins around .rsImg. My last effort involved setting img.rsImg in royalslider.css:232. But that setting is being overridden; I believe the override that is producing the margin, is also responsible for the exaggerated fullscreen margin issue.

    Thanks for your attention,
    Wayne

  4. Support Staff 4 Posted by Dmytro Semenov on 04 Dec, 2012 10:18 AM

    Dmytro Semenov's Avatar

    Thumbnails issue is related to this - http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid...

    Image is not correctly positioned in fullscreen because you added direction: rtl; to royalslider.css, it should be ltr.

    Dmitry

  5. 5 Posted by mr.henry.kiss on 04 Dec, 2012 09:17 PM

    mr.henry.kiss's Avatar

    Hi,

    Thanks for the guidance. The 'updateSliderSize' method did not resolve the sliding thumbs issue but it led me to 'updateThumbSize' which took care of it. I added:

    $('.royalSlider').royalSlider('updateThumbsSize');

    after re-inserting .rsNav into the DOM.

    I was able to center the fullscreen image by reverting direction to ltr. There is a empty footer on the fullscreen presentation. In this empty footer, the webpage under the slide is visible. I assume the empty space caused by the missing thumbnail strip that I removed. I did call:

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

    but it idid not resolve the problem.

    What can I do to have the fullscreen slide take up the whole screen?

    Is there a way to reattach the thumbnails after a visitor has selected the fullscreen view?
    If so, where can I call:

    $('.rsNav').insertBefore('#thumbnailer');

    to put the thumbnails back where I want them when the fullscreen view is closed?

    Thanks again,
    Wayne

  6. 6 Posted by mr.henry.kiss on 05 Dec, 2012 01:52 AM

    mr.henry.kiss's Avatar

    Hi,

    I found this helpful link about extending slider prototype and was going to try to use that technique to add and remove the thumbnails when entering and exiting fullscreen.

    I tried to override enterFullscreen after initializing the slider in colorbox's onComplete method:

    currRs.enterFullscreen = function() {

          console.log('Overriding enterFullscreen!');
          $.rsProto.enterFullscreen.call(this);
    

    };

    'Overriding enterFullscreen was logged to the console, and the enterFullScreen behaviour began, but did not complete. The webpage was stretched to full screen, but the slider remained the same. You can see the issue here: http://outlinegraphics.com/dmitry/home.html

    Perhaps this is not the best solution, your help will be appreciated.

    Thanks!
    Wayne

  7. 7 Posted by mr.henry.kiss on 05 Dec, 2012 09:22 AM

    mr.henry.kiss's Avatar

    Hi,

    After debugging with the dev-js-files I was able to make some progress with using $.rsProto. I can now re-attach the thumbnails to the royalSlider by overriding enterFullscreen(). That public method takes a 'preventNative' argument. By adding 'true' to the override I was able to use the slide show at full screen. I am not certain this is the correct configuration, but I am on a deadline....

    The last remaining issues is that my override of exitFullscreen, shrinks the royalSlider and re-insertes the thumbnails where I need them, but leaves the webpage at fullscreen. You can see the issue here:
    http://outlinegraphics.com/dmitry/home.html

    Here is the relevant js showing the activity in the onComplete of a colorbox init

      $('#the-properties').on('click', '.overlay-trigger', function(e) {
          e.preventDefault();
          $.colorbox({
                inline:true, 
                href:"#the-properties-sheet",
                transition: "fade",
                opacity: .25,
                onComplete: function(e) {
                    currRs = $('#cboxLoadedContent').find('.royalSlider').royalSlider({
                        fullscreen: {
                          enabled: true,
                          nativeFS: true,
                          buttonFS: true
                        },
                        thumbs: {
                            autoCenter: false
                        },
                        imageScaleMode: 'fit',
                        controlNavigation: 'thumbnails',
                        loop: false,
                        numImagesToPreload:4,
                        arrowsNavAutohide: true,
                        arrowsNavHideOnTouch: true,
                        keyboardNavEnabled: true
                        }).data('royalSlider');
                        currRs.enterFullscreen = function() {
                            $('.rsNav').appendTo('.royalSlider');
                            $.rsProto.enterFullscreen.call(this, true);
                        };
                        currRs.exitFullscreen = function() {
                            $('.rsNav').insertBefore('#thumbnailer');
                            $.rsProto.exitFullscreen.call(this, true);
                        };
                        $('.rsNav').insertBefore('#thumbnailer');
                        $('.royalSlider').royalSlider('updateThumbsSize');
              },
              href:$(this).attr('href')
          });
    
  8. Support Staff 8 Posted by Dmytro Semenov on 05 Dec, 2012 07:30 PM

    Dmytro Semenov's Avatar

    Hi,

    Just pass through preventNative variable, like so

                        currRs.enterFullscreen = function(preventNative) {
                            $('.rsNav').appendTo('.royalSlider');
                            $.rsProto.enterFullscreen.call(this, preventNative);
                        };
                        currRs.exitFullscreen = function(preventNative) {
                            $('.rsNav').insertBefore('#thumbnailer');
                            $.rsProto.exitFullscreen.call(this, preventNative);
                        };
    

    Dmitry

  9. 9 Posted by mr.henry.kiss on 05 Dec, 2012 08:19 PM

    mr.henry.kiss's Avatar

    That did it! Thanks!!!

  10. mr.henry.kiss closed this discussion on 05 Dec, 2012 08: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