-2
のように動作していない、それは私がJSFiddle情報で作成した私のファイルでは動作しません。ここに私のコードは次のとおりです。JSフィドル。私は<a href="http://jsfiddle.net/zra6fvtt/2/" rel="nofollow noreferrer">http://jsfiddle.net/zra6fvtt/2/</a></p> <p>私はそれを保存しようJSFiddle に非常に素晴らしい例を発見したコードを保存したが、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>
にインポートされます。 – Pointy
ブラウザのコンソールにはどのようなエラーがありますか？ – j08691
@pointy外部リソースには、Jqueryライブラリはありません。しかし、1つのSlik.min.jsファイルと1つのslik.cssファイルのみ。私はそれらを埋め込んだ。 jqueryを追加する方法を教えてください。 –