# Navigation

## Content

To view multi-frame images such as .gif, .tiff or .ico files, DsImageViewer provides navigation buttons in the toolbar.
Below image shows how a navigation button group appears in the toolbar.
![navigation-bar.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/navigation-bar.bf5822.png)
The navigation button group contains the following components:

| Navigation Button Icons | Navigation Button Names | Description |
| ----------------------- | ----------------------- | ----------- |
| ![first-button.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/first-button.ea5674.png) | Go to first | Opens the first frame of the image directly. |
| ![previous-button.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/previous-button.2d6a17.png) | Go to previous | Navigates to the previous frame of the image. |
| ![index.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/index.7ee9ba.png) | Index | Displays index of the existing frame. Also, lets you specify the index you want to jump to. |
| ![next-button.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/next-button.344772.png) | Go to next | Opens the next frame of the image. |
| ![last-button.png](https://cdn.mescius.io/document-site-files/images/8f8ddd13-6a19-4879-8713-7794513e3372/last-button.7e9145.png) | Go to last | Navigates directly to the last frame of the image. |

**Using code**
To navigate to a particular frame through code, you can specify [frameIndex](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/DsImageViewer#frameindex) property of the viewer class once image has loaded in the viewer completely. You can fetch the total number of frames in an active image by using the [framesCount](https://developer.mescius.com/document-solutions/javascript-image-viewer/api/classes/DsImageViewer#framescount) property.

```javascript
function loadImageViewer() {
    // initialize image viewer
    var viewer = new DsImageViewer("#imageviewer");

    // open an image and wait for it to load completely
    viewer.open("Multi_page24bpp.tif", { imageFormat: 3 });

    // wait for image to load completely using onAfterOpen event and then set frameIndex
    viewer.onAfterOpen.register(function () {

        // set frame index i.e., change active frame programmatically
        viewer.frameIndex = 2;

        // use the framesCount property to get total frames count for the active image
        console.log("Active image frames count is: " + viewer.framesCount);
    });
}
```