缩略图滑块显示视频和图像 [英] thumbnail slider display video and images

问题描述

我的缩略图滑块适用于图像文件.但是现在我的滑块中有一些视频，单击适当的缩略图后会更改.对于图像，我正在更改缩略图单击上的src.只需单击我的代码，就可以通过单击缩略图显示视频.下面是我的代码.

My thumbnail slider is working properly for image file. But now i have some video in my slider which will change on click of appropriate thumbnail. for image i am changing the src on thumbnail click. Is it possible to display video on thumbnail click , just doing some changes in my code. Below is my code.

 <style>
    /* -- thumbnails -- */
    #thumbnails {
        float:left;
        width:120px;
        overflow-y: auto;
        .thumb {
            padding:11px 8px;
            cursor: pointer;
        }
        img {
            border: 1px solid #DDD;
            cursor: pointer;
            width:90px; 
            height:60px;
           }
        .frame {
            float: left;
            padding: 2px;
            border: 1px solid #CCC;
        }
     }
     #slider {

      #largeImage {
          position: absolute;
          width: 100%;
          height: 100%;
      }
}
</style>

 <div class="row">
    <div class="col-2" id="thumbnails">
        <div class="thumb">
            <div class="frame"><img src="https://thethemefoundry.com/wp-content/themes/ttf-reloaded/images/single-theme/video-thumbnail.png" /></div>                    
        </div>
        <div class="thumb">
            <div class="frame"><img src="img/sim_imaging/header2.jpg" /></div>                                         
        </div>
        <div class="thumb">
            <div class="frame"><img src="img/sim_imaging/header3.jpg" /></div>                   
        </div>
        <div class="thumb">
            <div class="frame"><img src="img/sim_imaging/header4.jpg" /></div>    
        </div>
        <div class="thumb">
            <div class="frame"><img src="img/sim_imaging/header5.jpg" /></div>    
        </div>
        <div class="thumb">
            <div class="frame"><img src="img/sim_imaging/header6.jpg" /></div>    
        </div>
    </div>
    <div class="col-10">
        <img id="largeImage" src="https://thethemefoundry.com/wp-content/themes/ttf-reloaded/images/single-theme/video-thumbnail.png" class="img-fluid"/>
    </div>
</div>
<script>
  $('#thumbnails img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});
</script>

此 http://jsfiddle.net/b6jtwndd/代码适用于视频.在stackoverflow中找到此解决方案.

This http://jsfiddle.net/b6jtwndd/ code is working well for video. find this solution in stackoverflow.

推荐答案

我在img标签中添加了数据源.并设置我的视频的路径比起我的功能进行了小的更改...现在它也适用于图像和视频.

I add data-source within my img tag . and set the path of my video. and than did small changes in my function... now it's working for image and video as well.

$('#thumbnails img').click(function(){
video = '<iframe width="100%" height="515" src="'+ $(this).attr('data-video') +'"></iframe>';
if(this.hasAttribute('data-video'))
{
$('#largeImage').replaceWith(video);
}
else
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));


$('#description').html($(this).attr('alt'));
});

这篇关于缩略图滑块显示视频和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！