为什么我会得到' Uncaught TypeError'错误?

时间:2017-05-02 11:01:15

标签: javascript jquery html css

我根据所选类别再次生成了我的轮播,如下例所示,但是在点击我的轮播后,它给了我这个错误

enter image description here plugin.js:1132是我的lightgallery plugin的开头,我使用此图库与cycle2。

但有一些事情我告诉你,当我在这条道路上使用lightgallery时:

https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js

我没有给出任何错误(demo) - 但如果我使用此路径:

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,lg-zoom@1.0.3

它给了我一个这个错误,我必须使用它,因为这个版本包括我需要的所有功能。

和我的js



$(document).ready(function() {
  function generateSlider() {
    $(".mySlideShow").cycle({
      next: "#single-right",
      log: false,
      fx: "fade",
      caption: ".cycle-caption",
      captionTemplate: "{{title}}",
      pauseOnHover: true,
      pager: "#single-pager",
      pagerTemplate: "<a href='#'><img class=lazyload data-src={{exthumbimage}} width=60 height=60></a>",
      prev: "#single-left",
      slides: "a[data-hidden='false']"
    });
  }

  generateSlider();

  $(".filter li").on("click", function() {
    var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $("a").attr("data-hidden", "false");
    } else {
      $("a").attr("data-hidden", "true");
      $("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $(".mySlideShow").cycle("destroy");
    generateSlider();
  });

  $(" .mySlideShow").lightGallery({
    exThumbImage: "data-exthumbimage",
    download: false,
    thumbnail: true,
    loadYoutubeThumbnail: true,
    youtubeThumbSize: "default",
    loadVimeoThumbnail: true,
    vimeoThumbSize: "thumbnail_medium"
  });
});
&#13;
.single-gallery{
  width:800px;
  overflow:hidden;
  position:relative;
}
.cycle-slideshow img {
  width:100%;
  height:494px;
  max-width:100%;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

.filter {
  position: absolute;
  z-index: 1000;
  right: 0;
  top:0;
  padding: 0;
  color: #FFF;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 30px;
}

.filter li {
  list-style-type:none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

a[data-hidden="true"]{
  display: none;
}
&#13;
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>


<div class="single-gallery" id="single-gallery">
		<div class="single-gallery-carousel">
			<div class="slideshow-area">
						  <ul class="filter">
              <li id="sports">Sports</li>
              <li id="naturel">Naturel</li>
              <li id="animals">Animals</li>
              <li id="show-all">All</li>
            </ul>
				</div>
				<div class="mySlideShow">
					 <a data-exthumbimage="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg" data-id="naturel"  data-hidden="false" data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg">
             <img class="lazyload" data-src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg">
          </a> 
          
          <a class="video" data-hidden="false" data-id="naturel" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537">
            <img class="lazyload" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg">
          </a> 
          
          <a data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-hidden="false" data-id="naturel" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
            <img class="lazyload" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-poster="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
          </a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
            </a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" ></a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" ></a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" ></a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
          </a> 
          
          <a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
            <img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg"  data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
          </a>
          
				</div>
			</div>
			<div class="center external" id="single-pager">
			</div>
		</div>
		<div id="single-next-prev">
			<span class="ani-icon-chevron-pointing-to-the-left ani-cycle-control" id="single-left"></span> <span class="ani-icon-right-chevron ani-cycle-control" id="single-right"></span>
		</div>
	</div>


<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,lg-zoom@1.0.3'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

检查您的网络标签,是否最后加载了lightgallery脚本,您还应该在最后调用脚本的位置调用它。 “$ items”未定义,因为首先加载了lightgallery脚本,而脚本没有获得正确的数据。