chocolat.js - How to set current image in container with chocolat jquery?

Question

Welcome To Ask or Share your Answers For Others

chocolat.js - How to set current image in container with chocolat jquery?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

chocolat.js - How to set current image in container with chocolat jquery?

I am using this jquery plugin chocolat: https://chocolat.gitbook.io/chocolat/options

I almost got it to work how I want it. The only thing which I can't get to set is by default make the light box have the first image already opened in the container.

My code is to be found here: 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>

I think I have to do something with a function current or default image. But I can't seem to find the right option. Could somebody have a look for me. I think it's probably easily fixed.

question from:https://stackoverflow.com/questions/65641847/how-to-set-current-image-in-container-with-chocolat-jquery

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T18:46:58+0000

After instantiating Chocolat you can get access to its api using :

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

Then simply call open() api method to open the first image:

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

Categories

chocolat.js - How to set current image in container with chocolat jquery?

chocolat.js - How to set current image in container with chocolat jquery?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags