# Api

## Accessing the API

You can control Chocolat using its API.\
Once you instanciated Chocolat you can access the api using :&#x20;

```javascript
const instance = Chocolat(document.querySelectorAll('.chocolat-image'), {})
const api = instance.api

// or 

const { api } = Chocolat(document.querySelectorAll('.chocolat-image'), {})

// or 

const api = Chocolat(document.querySelectorAll('.chocolat-image'), {}).api
```

## Api methods

### **open(\[index])** &#x20;

Opens the lightbox on the image whose index is `i`. \
Opens on the first image if `index` undefined.\
Returns a `Promise`.

```javascript
// Opens the first image
api.open() 

// Opens the 3rd image
api.open(2).then(() => {
    console.log('Third image is loaded and animations have finished.')
})
```

### close()

Closes the lightbox. \
Returns a `Promise`.

```javascript
api.close() 

// or

api.close().then(() => {
    console.log('Animations have finished and lightbox is closed.')
})
```

### **prev()**

Changes image backward. \
Returns a `Promise`.

```javascript
api.prev() 

// or

api.prev().then(() => {
    console.log('Previous image is loaded and animations have finished.')
})
```

### **next()**

Changes image forward. \
Returns a `Promise`.

```javascript
api.next() 

// or

api.next().then(() => {
    console.log('Next image is loaded and animations have finished.')
})
```

### current()

Returns the index of the current image.

```javascript
api.current() // returns 1, for example
```

### position()

Centers the image in its parent. \
Returns a `Promise`.

```javascript
// Centers the current image
api.position().then(() => {
    console.log('Image is centered and animations have finished.')
})
```

### destroy()

Destroys the current instance.\
Removes elements, unbinds events, clears data.

```javascript
api.destroy()
```

### getElem(elementName)

Returns a `HTMLElement` composing the lightbox.

```javascript
// Get the `next` arrow element
api.getElem('right')
```

### **get(optionName)**

&#x20;Classic getter

```javascript
api.get('imageSize') // 'default'
```

### **set(optionName, optionValue)**

Classic setter

```javascript
// Changes imageSize to 'contain'
api.set('imageSize', 'contain')
// Reposition the image according to the new value `contain`
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/api.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.
