在JS或jQuery中播放图像/视频库中的视频，点击大图像

Question

我找到了很多有用的图像库网站，但画廊中的视频却不多。

我需要帮助将视频作为图片库的一部分播放，一旦您单击大图像（而不是单击缩略图）播放视频。

例如，此站点已经具有图像库的完整代码。我只需要在图库末尾添加视频即可播放视频。http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

$(document).ready(function() {
    // Image swap on hover
    $("#gallery li img").hover(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

#gallery li {
display: inline;
margin-right: 3px;
}
#gallery #main-img {
background: url(images/bg_img.png) no-repeat 0 0;
padding: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gallery">
    <img src="images/gallery/img_1.jpg" alt="" id="main-img" />
    <ul>
      <li><img src="images/gallery/thumb/img_1.jpg" alt="" /></li>
      <li><img src="images/gallery/thumb/img_3.jpg" alt="" /></li>
      <li><img src="images/gallery/thumb/img_4.jpg" alt="" /></li>
      <li><img src="images/gallery/thumb/img_5.jpg" alt="" /></li>
      <li><img src="images/gallery/thumb/img_6.jpg" alt="" /></li>
      <li><img src="images/gallery/thumb/img_7.jpg" alt="" data-video="www.video.com?videoparameters_autoplay="1" "/></li>
    </ul>
</div>

我会为我希望视频的最后一张图片添加数据属性吗？$（'.gallery，image7 only'）.click（function（） { var playVideo = ''; $（'.video'）.hide（）;
});

调用功能点击图片7播放视频，如果图像 6 然后隐藏，依此类推。希望这是有道理的。

Answer 1

调用函数点击图片7播放视频，如果图片6则隐藏，等等。 希望这是有道理的。

对不起，这没有意义。如果我理解您要做的是在单击最后一个图像时使#main-img成为视频。早些时候我想你说过：

我需要帮助将视频作为图片库的一部分播放，一旦您单击大图像（而不是单击缩略图）播放视频。

图7不是拇指吗？好吧，如果这个演示的行为不完全符合您的要求，我相信这将帮助您朝着正确的方向前进。

更改列表包括：

• 在带有类.hide的#main-img旁边添加了#vid的视频元素
• 最后一个图像#vidImg有一个委托的单击事件，当触发该事件时，该事件将在#vid上toggleClass .hide并#main-img，因此现在如果一个存在，另一个则不存在。

片段

$(document).ready(function() {
  // Image swap on hover
  $("#gallery li img").hover(function() {
    $('#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
  });
  // Image preload
  var imgSwap = [];
  $("#gallery li img").each(function() {
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
  });
  $(imgSwap).preload();
});
$.fn.preload = function() {
  this.each(function() {
    $('<img/>')[0].src = this;
  });
}
$("#vidImg").on('click', function() {
    $('#vid').toggleClass('hide');
    $('#main-img').toggleClass('hide');
  });

#gallery li {
  display: inline;
  margin-right: 3px;
  width: 100px;
  height: 75px;
}
#gallery #main-img {
  background: url(images/bg_img.png) no-repeat 0 0;
  padding: 26px;
}
.hide { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gallery">
  <img src="http://placehold.it/200x150/000/fff?text=0" alt="" id="main-img" />
  <video id="vid" class="hide" poster="http://placehold.it/200x150/fff/000?text=VIDEO" src="http://glpjt.s3.amazonaws.com/so/av/vid1.mp4" width="200" height="150" controls></video>
  <ul id="list">
    <li>
      <img src="http://placehold.it/100x75/000/fff?text=1" alt="" />
    </li>
    <li>
      <img src="http://placehold.it/100x75/fff/000?text=2" alt="" />
    </li>
    <li>
      <img src="http://placehold.it/100x75/000/fff?text=3" alt="" />
    </li>
    <li>
      <img src="http://placehold.it/100x75/fff/000?text=4" alt="" />
    </li>
    <li>
      <img src="http://placehold.it/100x75/000/fff?text=5" alt="" />
    </li>
    <li>
      <img id="vidImg" src="http://placehold.it/100x75/000/fff?text=VIDEO" />
    </li>
  </ul>
</div>