Question

我在JSFiddle上找到了一个很好的例子 http://jsfiddle.net/zra6fvtt/2/

当我尝试保存它时，它在我使用JSFiddle信息创建的文件中不起作用。这是我的代码：

/* =========================================================
 * imageimageviewer.js
 * =========================================================
 * Controls the interaction with the product images on the PDP and collection PDP. A large image is presented with a
 * series of thumbnails. If there are more than X (configurable) thumbnails, a scroller allows the user to see the
 * others. Clicking on a thumbnail will change the large image. If the user scolls past the active thumbnail, the first thumbnail in the visible set will become active and the main image will update. If the user navigates by swiping the large image, the thumbnail strip will update to reflect the user's selection. 
 * ========================================================= */

(function(global, $, namespace) {

  "use strict";

  var Imageviewer = function Imageviewer(element, options) {
      this.init('imageviewer', element, options);
    },
    loggingDebug = true;

  //PUBLIC
  Imageviewer.prototype = {
    constructor: Imageviewer,
    init: function init(type, element, options) {
      if (loggingDebug) {
        console.debug('init imageviewer with options:');
        console.debug(Array.prototype.slice.call(arguments));
      }

      var self = this;

      this.options = $.extend({}, $.fn[type].defaults, options);
      this.$element = $(element);
      this.$navigation = this.$element.find(this.options.thumbnail_container_class);
      this.$mainView = this.$element.find(this.options.large_container_class);
      this.totalSlides = this.$navigation.find(this.options.thumbnail_class).length;
      this.slidesToShow = self.options.slider_min;

      this.$navigation.find(this.options.thumbnail_class).first().addClass('active');

      this.$mainView.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        infinite: false,
        onAfterChange: function() {
          var index = self.$mainView.slickCurrentSlide();
          // catch when user has dragged the main image and update the nav to match
          if (self.getActiveSlide() != index) {
            self.setActiveSlide(index);
            if (!self.isSlideVisible(index, self.$navigation.slickCurrentSlide())) {
              self.$navigation.slickGoTo(Math.floor(index / self.slidesToShow) * self.slidesToShow);
            }
          }
        }
      });

      this.$navigation.slick({
        slidesToShow: self.options.slider_min,
        slidesToScroll: self.options.slider_min,
        dots: false,
        infinite: false,
        onAfterChange: function() {
          var index = self.$mainView.slickCurrentSlide();
          if (!self.isSlideVisible(index, self.$navigation.slickCurrentSlide())) {
            self.$mainView.slickGoTo(self.getFirstVisibleSlide(self.$navigation.slickCurrentSlide()));
            self.setActiveSlide(self.getFirstVisibleSlide(self.$navigation.slickCurrentSlide()));
          }
        }
      });

      this.$navigation.find(this.options.thumbnail_class).click(function(e) {
        var index = parseInt(this.getAttribute('index'));
        self.setActiveSlide(index);
        self.$mainView.slickGoTo(index);
      });
    },
    getFirstVisibleSlide: function(currentSlide) {
      var firstSlide = currentSlide;
      if (currentSlide + this.slidesToShow >= this.totalSlides) {
        firstSlide = this.totalSlides - this.slidesToShow;
      }
      return firstSlide;
    },
    isSlideVisible: function(slideIndex, currentSlide) {
      var isVisible = false;
      if (currentSlide + this.slidesToShow > this.totalSlides) {
        isVisible = (slideIndex >= this.totalSlides - this.slidesToShow) && (slideIndex <= this.totalSlides - 1);
      } else {
        isVisible = (slideIndex >= currentSlide) && (slideIndex <= currentSlide + this.slidesToShow - 1);
      }
      return isVisible;
    },
    getActiveSlide: function() {
      var slideIndex = this.$navigation.find('.active').index() || 0;
      return slideIndex;
    },
    setActiveSlide: function(index) {
      this.$navigation.find(this.options.thumbnail_class).removeClass('active').end()
        .find("[index='" + index + "']").addClass('active')
    }

  };

  $.fn.imageviewer = function imageviewer(option) {
    var el = this,
      options = $.extend({}, $.fn.imageviewer.defaults, typeof option === 'object' && option);
    return el.each(function() {
      var data = $.data(this, 'imageviewer');
      if (!data) {
        $.data(this, 'imageviewer', (data = new Imageviewer(this, options)));
      } else {
        if (typeof option === 'object') {
          $.extend(data.options, option);
        }
      }
    });
  };

  $.fn.imageviewer.defaults = {
    large_container_class: ".viewer-main",
    thumbnail_container_class: ".viewer-thumbnails",
    thumbnail_class: ".viewer-thumb",
    slider_min: 5
  };

  $.fn.imageviewer.Constructor = Imageviewer;


  $(function() {
    $('[data-imageviewer]').imageviewer();
  });


}(this, window.jQuery, "CLIENT"));

.viewer-thumbnails-container {
  margin: 0 40px;
}

.viewer-thumb {
  border: solid 2px transparent;
  margin: 2px;
}

.viewer-thumb.active {
  border: solid 2px black;
}

img {
  max-width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<div class="product-image-viewer" data-imageviewer>
  <div class="viewer-main">
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+1" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+2" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+3" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+4" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+5" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+6" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+7" />
    </div>
    <div>
      <img class="viewer-main-image" src="http://placehold.it/576x390&text=image+8" />
    </div>
  </div>
  <div class="viewer-thumbnails-container">
    <div class="viewer-thumbnails">
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+1" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+2" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+3" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+4" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+5" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+6" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+7" />
      </div>
      <div class="viewer-thumb">
        <img class="viewer-thumb-image" src="http://placehold.it/96x65&text=image+8" />
      </div>
    </div>
  </div>
</div>

Answer 1

添加此标记<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

jQuery是在小提琴中导入的

JS小提琴。保存的代码但不像JSFiddle一样工作

1 个答案: