videos und pictures with same slider

gbuchmann's Avatar

gbuchmann

29 Jul, 2021 10:37 AM

Hello
The Slider is up and running, I like its behaviour.
Now I would also integrate videos as slides in the same slider.
I already have tested the video only part as written in "Adding support for third-party video player " and it works fine.
Could you please tell me how I have to integrate the Javascript-part?
I have for the Picture slider:
#--------------------------------------------#
      jQuery(document).ready(function($) {
  $('#full-width-slider').royalSlider({
    arrowsNav: false,
    loop: true,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fit',
    arrowsNavAutoHide: false,
    autoScaleSlider: true,
    autoHeight: false,
    autoScaleSliderWidth: 177.6,
    autoScaleSliderHeight: 100,
    controlNavigation: 'bullets',
    thumbsFitInViewport: false,
    navigateByClick: false,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'move',
    globalCaption: true,
    imageAlignCenter: true
  });
});
#--------------------------------------------#
And for the video slider:
#--------------------------------------------#
  var slider = $('.royalSlider').royalSlider({
    // options...
      keyboardNavEnabled: true,
      sliderDrag: true,
      imageScaleMode: 'fit',
      arrowsNav: true,
      loop: true,
      controlsInside: false,
      arrowsNavAutoHide: false,
      autoScaleSlider: false,
      autoHeight: false,
      autoScaleSliderWidth: 177.6,
      autoScaleSliderHeight: 100,
      controlNavigation: 'bullets',
      thumbsFitInViewport: false,
      navigateByClick: false,
      startSlideId: 0,
      autoPlay: false,
      transitionType:'move',
      globalCaption: true,
      imageAlignCenter: true
      
}).data('royalSlider');
 
   slider.ev.on('rsOnCreateVideoElement', function(e, url)
    {
// url - path to video from data-rsVideo attribute
        // slider.videoObj - jQuery object that holds video HTML code
        // slider.videoObj must be IFRAME, VIDEO or EMBED element, or have class rsVideoObj
        slider.videoObj = $('<div id="mediaplayer" class="rsVideoObj">Loading the player ...</div>');
      setTimeout(function() {
        jwplayer('mediaplayer').setup({
          'flashplayer': 'jwplayer/player.swf',
          'id': 'playerID',
          'width': '100%',
          'height': '100%',
          "autoplay": true,
          'file': url,
          'viral.onpause': false,
          'controlbar.idlehide':true,
          'stretching': 'uniform',
        });
      }, 50);
});
#--------------------------------------------#
I have to combine both scripts, but got alwas error codes.
Thank you for your help.
Regards, Georg

  1. Support Staff 1 Posted by Dmitry Semenov on 29 Jul, 2021 03:06 PM

    Dmitry Semenov's Avatar

    Hello,

    The code $('.royalSlider').royalSlider({ ... will initialize all elements on the page with class royalSlider .

    $('#full-width-slider').royalSlider({... is redundant in your case, it initializes only element with ID full-width-slider.

  2. 2 Posted by gbuchmann on 30 Jul, 2021 12:03 PM

    gbuchmann's Avatar

    Thank you very much.
    I still have some problems, perhaps as my Javascript-KnowHow is not as big as it should…

    I have defined var slider as listet below, but I get always the error "Uncaught TypeError: slider is undefined”.

    Perhaps there is another solution to combine the video slide into the picture slide?

    Thank you for your help.
    Regards, Georg

  3. Support Staff 3 Posted by Dmitry Semenov on 31 Jul, 2021 08:46 AM

    Dmitry Semenov's Avatar

    I'd need a link to the page with the issue to tell you what might be wrong. The structure should be something like:

     jQuery(document).ready(function($) {
    
      var slider = $('.royalSlider').royalSlider({
        // options
      });
    
      // slider variable is available here
    
    });
    
  4. 4 Posted by gbuchmann on 02 Aug, 2021 10:35 AM

    gbuchmann's Avatar

    Thank you very much! The result is here:
    gbuchmann.ch <http://gbuchmann.ch/>

    Georg Buchmann
    Oberstadt 19
    8200 Schaffhausen

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