# 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 :

```markup
<!-- 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.

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

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

Also the `imageSelector` option has been removed.

```javascript
// 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](/chocolat/1.1.2/usage.md).

```javascript
// 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.

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

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

jQuery objects are no longer valid.

```javascript
// 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.

```javascript
// 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.

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

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

#### separator2

&#x20;`separator2` has been replaced with the `pagination` function.

```javascript
// 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` .

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

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

#### lastImage

`lastImage` has been renamed to `lastImageIndex` .

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

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

#### currentImage

`currentImage` has been renamed to `currentImageIndex` .

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

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

#### imageSize

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

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

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

#### enableZoom

`enableZoom` has been renamed to `allowZoom` .

```javascript
// 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](/chocolat/1.1.2/api.md)

```javascript
// 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` .

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

// with: 
instance.api.position()
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chocolat.gitbook.io/chocolat/1.1.2/upgrading-from-v0.4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.