Question

我需要使用embed将视频导入视频库，并且我一直在使用Lightgallery来执行此操作。我已经阅读了一些关于它的文档，但由于我对jQuery缺乏经验，我无法达到我想要的目标。

是否可以使用嵌入代码而不是data-src添加视频？我不想在data-src内添加我的视频网址，我在Lightgallery页面上看到了有关Vimeo参数的文档。

我的代码段如下：

＆＃13;

$(document).ready(function() {
  options = {
          next: "#single-right",
          log: false,
          fx: "fade",
          caption: ".cycle-caption",
          captionTemplate: "{{title}}",
          pauseOnHover: true,
          pager: "#single-pager",
          pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}' width='70' height='70'>",
          prev: "#single-left",
          slides: "div[data-hidden='false']"
        }
      function generateSlider(opt) {
        $("#myCarousel").cycle(opt);
      }

  generateSlider(options);
  
  $('#myCarousel').lightGallery({
    selector:"div[data-hidden='false']",
    exThumbImage: "data-exthumbimage",
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    vimeoThumbSize: 'thumbnail_medium',
  });
  
  
  
  $("#filter li").on("click", function() {
    $('#myCarousel').data('lightGallery').destroy(true);
        var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $(".item").attr("data-hidden", "false");
    } else {
      $(".item").attr("data-hidden", "true");
      $("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $("#myCarousel").cycle("destroy");
    options['pagerTemplate'] = "<img class='lazyload' data-src='{{children.0.src}}'  width='70' height='70'>"
    generateSlider(options);
    $('#myCarousel').lightGallery({
      selector:"div[data-hidden='false']",
      exThumbImage: "data-exthumbimage",
      loadYoutubeThumbnail: true,
      youtubeThumbSize: 'default',
      loadVimeoThumbnail: true,
      vimeoThumbSize: 'thumbnail_medium',
  });
    return false;
    });
  
});

＆＃13;

.mySlideShow{
  width:700px;
  position:relative;
}
.item img {
  cursor:pointer;
}
#single-pager img{
  margin:3px;
  cursor:pointer;
  width:60px;
  height:60px;
}
#filter{
  position:absolute;
  top:0;
  right:10%;
  z-index:100;
}
#filter li {
  display:inline-block;
  background:rgba(0,0,0,.7);
  color:#FFF;
  cursor:pointer;
  padding:12px;
}
.cycle-caption{
  position:absolute;
  bottom:14%;
  left:0;
  padding:12px;
  background:rgba(0,0,0,.5);
  color:#FFF;
  text-align:center;
  width:100%;
  z-index:100;
}
div[data-hidden='true']{
  display:none;
}

＆＃13;

<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>

<div class="mySlideShow">
  <div id="myCarousel">
    
  <div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg"/>
  </div>
      <div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg"/>
  </div>
    
    
  <div class="item" data-src="https://vimeo.com/214617676" data-exthumbimage="http://www.cgsociety.org/cgsarchive/stories/2003_7/isaac_kerlow/isaac_1.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://www.cgsociety.org/cgsarchive/stories/2003_7/isaac_kerlow/isaac_1.jpg"/>
  </div>
    
  <div id="single-pager">
  </div>
</div>
  <ul id="filter">
    <li id="animals">Animals</li>
    <li id="sports">Sports</li>
    <li id="natural">Natural</li>
    <li id="show-all">All</li>
  </ul>
  <div class="cycle-caption"></div>
</div>

<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script><script src='https://cdn.jsdelivr.net/g/lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0.1,lg-video@1.0.1,lg-autoplay@1.0.1'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script><script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>

＆＃13;

如何在不使用data-src的情况下在Vbox中嵌入Vimeo视频？

0 个答案: