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

【问题标题】：thumbnail slider display video and images缩略图滑块显示视频和图像
【发布时间】：2018-12-21 11:07:39
【问题描述】：

我的缩略图滑块在图像文件中正常工作。但现在我的滑块中有一些视频，点击相应的缩略图会改变。对于图像，我正在更改缩略图单击的 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 中找到这个解决方案。

【问题讨论】：

什么意思？你能解释一下吗？
在我的滑块中，我也想嵌入 youtube 视频。在上面的示例中，它适用于图像。但在我的滑块中，我也有一些视频。谢谢

标签： javascript jquery css

【解决方案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'));
});

【讨论】：