Is there a way to add video icon to thumbnail that link to video?

Michele's Avatar

Michele

14 Jan, 2022 01:44 PM

Hello,
I've got a RoyalSlider with images and videos, and I'd like to add icon video above/overlay the thumbnails with videos (I mean only the thumbnails with video).
Is it possible?
Thanks.

  1. 1 Posted by Michele on 14 Jan, 2022 02:20 PM

    Michele's Avatar

    I've tried using this instruction but not works:

    slider.ev.on('rsAfterParseNode', function(e, content, obj){
          //slider.enterFullscreen(); 
            if(obj.videoURL) {
               // just wrap it
              obj.thumbnail = '<div class="video">' + obj.thumbnail + '</div>';
               // or add class to img
               // obj.thumbnail = obj.thumbnail.replace('<img', '<img class="video"');
              }
          });
    

    This is the full code used:

          $('#rs-gallery-vertical').royalSlider({
          fullscreen: {
            enabled: true,
            nativeFS: false
          },
          controlNavigation: 'thumbnails',
          thumbs: {
            orientation: $(window).width() <= 1199 ? 'horizontal' : 'vertical',
            paddingBottom: 4,
            appendSpan: true
          },
          //video: {
                //autoHideBlocks: true,
                //autoHideArrows: false
            //},
          transitionType:'fade',
          autoScaleSlider: true,
          imageScaleMode: 'fit',
          autoScaleSliderHeight: 500,
          navigateByClick: false,
          loop: true,
          arrowsNav: false,
          keyboardNavEnabled: true
          });
          var slider = $('#rs-gallery-vertical').data('royalSlider');
          slider.ev.on('rsSlideClick', function(){
          //slider.enterFullscreen(); 
            if(slider.isFullscreen) {
               slider.exitFullscreen();
               slider.stopVideo();
            } else {
               slider.enterFullscreen();
              slider.playVideo();
            }
          });
    slider.ev.on('rsAfterParseNode', function(e, content, obj){ //slider.enterFullscreen(); if(obj.videoURL) { // just wrap it obj.thumbnail = '<div class="video">' + obj.thumbnail + '</div>'; // or add class to img // obj.thumbnail = obj.thumbnail.replace('<img', '<img class="video"'); } });
    $(window).on("orientationchange",function(){ if($(window).width() <= 1199){ slider.setThumbsOrientation('horizontal'); } else { slider.setThumbsOrientation('vertical'); } });
  2. Support Staff 2 Posted by Dmytro Semenov on 16 Jan, 2022 07:30 PM

    Dmytro Semenov's Avatar

    Hi,

    Your code is correct, but you're running it after slider is initialized and after thumbnails are generated. If you don't want to bother with creating a module, you can just loop through thumbnail elements, for example:

    var slider = $('.royalSlider').data('royalSlider');
    $('.rsThumbsContainer').children().each(function(index, el) {
      if(slider.slides[index].videoURL) {
        $(el).addClass('video-thumb');
      }
    });
    
  3. 3 Posted by Michele on 16 Jan, 2022 08:05 PM

    Michele's Avatar

    Thanks!

  4. Michele closed this discussion on 07 Feb, 2022 03:36 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