Home → RoyalSlider HTML version issues →

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

• Edit

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

   

   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');
             }
         });
   

   • Edit

2. Support Staff 2 Posted by Dmytro Semenov on 16 Jan, 2022 07:30 PM

   

   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');
     }
   });
   

   • Edit

3. 3 Posted by Michele on 16 Jan, 2022 08:05 PM

   

   Thanks!

   • Edit

4. Michele closed this discussion on 07 Feb, 2022 03:36 PM.