问如何用chocolat jquery在容器中设置当前图片？
EN

Stack Overflow用户

提问于 2021-01-09 18:59:56

回答 1查看 51关注 0票数 1

我正在使用这个jquery插件chocolat：https://chocolat.gitbook.io/chocolat/options

我几乎让它按照我想要的方式工作了。我唯一不能设置的是，默认情况下，让灯箱在容器中打开第一个图像。

我的代码可以在这里找到：www.bitchel.nl/test.html

<script type="text/javascript" src="dist/js/chocolat.js">
</script>
<link rel="stylesheet" href="dist/css/chocolat.css" type="text/css" media="screen" >

<body>
<div id="example3">
    <a class="chocolat-image" href="series/1.jpg" title="caption image 1">
        <img width="100" src="series/mini/1.jpg" />
    </a>
    <a class="chocolat-image" href="series/2.jpg" title="caption image 2">
        <img width="100" src="series/mini/2.jpg" />
    </a>
    <a class="chocolat-image" href="series/3.jpg" title="caption image 3">
        <img width="100" src="series/mini/3.jpg"/>
    </a>
</div>
<div id="container2" style="width: 100%; max-width:1000px; height: 100%; max-height: 1000px; background: #E0E0E0;"></div>
</body>

 <script>

            Chocolat(document.querySelectorAll('#example3 .chocolat-image'), {
                container: document.querySelector('#container2'),
                imageSize: 'contain',
        loop: true,
        allowZoom: false,
            })
</script>

我想我必须对函数current或default image做些什么。但我似乎找不到合适的选择。有没有人能帮我看看。我认为它可能很容易修复。

jquery

chocolat.js

回答 1

Stack Overflow用户

发布于 2021-01-09 19:43:05

实例化Chocolat后，您可以使用以下命令访问其api：

const { api } = Chocolat(document.querySelectorAll('#example3 .chocolat-image'), {
            container: document.querySelector('#container2'),
            imageSize: 'contain',
            firstImageIndex: 0,
            loop: true,
            allowZoom: false
        });

然后调用open()接口方法打开第一张图片：

        // Opens the first image
        api.open();

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65641847

复制

相似问题

问如何用chocolat jquery在容器中设置当前图片？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用chocolat jquery在容器中设置当前图片？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用chocolat jquery在容器中设置当前图片？
EN