Upgrading from v0.4

A few breaking changes have been made between version 0.4.x and version 1.0.x Upgrading should take less than 30 minutes.

Imports

Replace :

<!-- replace: -->
<script src="dist/js/jquery.chocolat.js"></script>
<!-- with: -->
<script src="dist/js/chocolat.js"></script>

Instanciation

Version 1 is no longer relaying on jQuery.

// replace:
$('#parent').Chocolat({})

// with:
Chocolat(document.querySelectorAll('#parent .chocolat-image'), {})

Also the imageSelector option has been removed.

// replace:
$('#parent').Chocolat({
    imageSelector: '.my-image',
    // options...
})

// with:
Chocolat(document.querySelectorAll('#parent .my-image'), {
    // options...
})

Options

images

You should no longer pass images array as an option, you are now supposed to pass it as the first argument of Chocolat. You can learn more on how to instanciate Chocolat here.

// replace:
$('whatever').Chocolat({
    images: [ 
        { src: 'img1.jpg' }, ...
    ],
    // options...
})

// with:
Chocolat([ { src: 'img1.jpg' }, ... ], {
    // options...
})

container

container must be an HTMLElement .

Selectors are no longer valid.

// replace:
{
    container: '.my-container-selector',
    // options ...
}

// with 
{
    container: document.querySelector('.my-container-selector'),
    // options ...
}

jQuery objects are no longer valid.

// replace:
{
    container: $('.my-container-selector'),
    // options ...
}

// with 
{
    container: document.querySelector('.my-container-selector'),
    // or
    // container: $('.my-container-selector')[0],
    
    // options ...
}

setTitle

setTitle is now a function returning a string.

// replace:
{
    setTitle: 'Title',
    // options ...
}

// with 
{
    setTitle: function () { return 'title' },
    // options ...
}

You can no longer use data-chocolat-title on your html element to set the title.

<!-- replace: -->
<div id="parent" data-chocolat-title="Set title">
    <!-- ... -->
</div>

// with 
{
    setTitle: function () { 
        return 'Set title' 
        // or 
        // return document.querySelector('#parent').dataset.chocolatTitle
    }
    // options ...
}

separator2

separator2 has been replaced with the pagination function.

// replace:
{
    separator2: '-',
    // options ...
}

// with 
{
    pagination: function () { 
        const last = this.settings.lastImageIndex + 1
        const position = this.settings.currentImageIndex + 1

        return `${position}-${last}`
    },
    // options ...
}

firstImage

firstImage has been renamed to firstImageIndex .

// replace:
{
    firstImage: 0,
    // options ...
}

// with 
{
    firstImageIndex: 0,
    // options ...
}

lastImage

lastImage has been renamed to lastImageIndex .

// replace:
{
    lastImage: 5,
    // options ...
}

// with 
{
    lastImageIndex: 5,
    // options ...
}

currentImage

currentImage has been renamed to currentImageIndex .

// replace:
{
    currentImage: 5,
    // options ...
}

// with 
{
    currentImageIndex: 5,
    // options ...
}

imageSize

imageSize default value 'default' as been renamed to 'scale-down'

// replace:
{
    imageSize: 'default',
    // options ...
}

// with 
{
    imageSize: 'scale-down',
    // options ...
}

enableZoom

enableZoom has been renamed to allowZoom .

// replace:
{
    enableZoom: true,
    // options ...
}

// with 
{
    allowZoom: true,
    // options ...
}

Api

API can now be accessed without calling the api() function. You can learn more on how to use the API here

// replace:
const instance = $(...).Chocolat().data('chocolat')
instance.api().open() // open() is taken as an example here.

// with:
const instance = Chocolat(...)
instance.api.open() // open() is taken as an example here.

place

place has been renamed to position .

// replace: 
instance.api().place()

// with: 
instance.api.position()