Question

现在我有一个使用slick的可拖动图片容器，我希望使用Chocolat.js进行单击时预览完整尺寸，

问题在于，当我释放鼠标时（在拖动之后），仍会触发全屏，

我试图在Dragg事件开始时销毁chocolat，但它仍然存在..

var $chocolat = $('.chocolat').Chocolat({
    imageSize: 'contain',
    loop: true
}).data('chocolat');

$('#bx-pager_builder').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true,
    beforeChange: function() {
        $chocolat.api().destroy();
    },
    afterChange: function() {
        $chocolat = $('.chocolat').Chocolat({
            imageSize: 'contain',
            loop: true
        }).data('chocolat');
    }
});

问题在于Chocolat文档没有提供示例..

知道我试图做的事情是否可行？（怎么样？^^）

Answer 1

你在某个地方有演示，所以我能理解这个错误吗？

无论如何，这个页面上有很多例子，您可以在浏览器中打开它：
https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html

这些行特别是： https://github.com/nicolas-t/Chocolat/blob/master/dist/index.html#L142L240 向您展示如何使用API

Answer 2

var chocolat_images = [];
$('.chocolat .chocolat-image').each(function(i){
    chocolat_images[chocolat_images.length] = { src: $(this).find('img').attr('src')};
});
var $chocolat = $('.slick-slider.chocolat').Chocolat(
{
    imageSize: 'contain',
    loop: true,
    images: chocolat_images,
    imageSelector: ''
}).data('chocolat');

$('.chocolat').on('click', '.chocolat-image', function(e) {
    e.preventDefault();
    $chocolat.api().open($(this).index())
});

我能够像这样解决它。 “手动”处理事件和索引

使用slick.js拖动时阻止单击Chocolat.js

2 个答案: