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.
Replace :
<!-- replace: -->
<script src="dist/js/jquery.chocolat.js"></script>
<!-- with: -->
<script src="dist/js/chocolat.js"></script>
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...
})
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
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
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
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
has been renamed to firstImageIndex
.// replace:
{
firstImage: 0,
// options ...
}
// with
{
firstImageIndex: 0,
// options ...
}
lastImage
has been renamed to lastImageIndex
.// replace:
{
lastImage: 5,
// options ...
}
// with
{
lastImageIndex: 5,
// options ...
}
currentImage
has been renamed to currentImageIndex
.// replace:
{
currentImage: 5,
// options ...
}
// with
{
currentImageIndex: 5,
// options ...
}
imageSize
default value 'default'
as been renamed to 'scale-down'
// replace:
{
imageSize: 'default',
// options ...
}
// with
{
imageSize: 'scale-down',
// options ...
}
enableZoom
has been renamed to allowZoom
.// replace:
{
enableZoom: true,
// options ...
}
// with
{
allowZoom: true,
// options ...
}
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
has been renamed to position
.// replace:
instance.api().place()
// with:
instance.api.position()
Last modified 3yr ago