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()
Image sizes
Contributing
Last modified 3yr ago