Question

我在JS / jQuery图片库中找到了许多有用的网站，但在图库中找不到很多视频。

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

例如，此网站已包含图片库的完整代码。我只需要在图库的末尾添加视频即可播放视频。 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/

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我会将数据属性添加到我想要视频的最后一张图片吗？ $（＆＃39; .gallery，image7 only＆＃39;）。click（function（）{ var playVideo =＆＃39;＆＃39 ;; $（＆＃39;。视频＆＃39;）。隐藏（）;
}）;

通话功能点击图片7播放视频，如果图像6然后隐藏，等希望这是有道理的。

Answer 1

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

抱歉，这没有意义。如果我了解您要执行的操作，请在点击最后一张图片时将#main-img设为视频。早些时候我想你说过：

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

Isn＆t; tt 7是一个拇指吗？好吧，如果这个演示没有按照你想要的方式行事，我相信这会帮助你朝着正确的方向前进。

更改列表如下：

在#vid旁边添加了一个视频元素#main-img，其中包含.hide类
最后一张图片#vidImg有一个委派的点击事件，在toggleClass和.hide时会#vid #main-img触发，所以现在如果存在，另一个一个人没有。

段

＆＃13;

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

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

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

1 个答案:

段