Question

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

 <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中找到此解决方案。

Answer 1

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

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

缩略图滑块显示视频和图像

1 个答案: