### start()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-navigation.md

Jumps to the first page of the flipbook.

```APIDOC
## start()

### Description
Navigates the flipbook to the first page.

### Signature
`start()`

### Example
```javascript
// Go to beginning of document
flipbook.start();
```
```

--------------------------------

### Flipbook Configuration

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

Examples of how to initialize a flipbook with various source types and custom behaviors.

```APIDOC
## Flipbook Configuration

### Description
Initialize flipbooks by passing an options object. Supported properties include `source`, `height`, `webgl`, `pageMode`, and `onLoad` callbacks.

### Usage Examples
- **PDF**: `{ source: 'url.pdf', height: 600, webgl: true }`
- **Images**: `{ source: ['img1.jpg', 'img2.jpg'], pageMode: DFLIP.PAGE_MODE.DOUBLE }`
- **Tracking**: Use `onLoad` to access `flipbook.target` and attach `flipCallback` for page change events.
- **Navigation**: Use `flipbook.target.next()` or `flipbook.target.prev()` within custom UI event handlers.
```

--------------------------------

### Jump to the start of the document with start()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-navigation.md

Navigates the flipbook to the first page.

```javascript
// Go to beginning of document
flipbook.start();
```

--------------------------------

### Example Outline Configuration

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/types.md

A sample array of outline items demonstrating nested structure.

```javascript
[
    {
        title: "Chapter 1",
        page: 5,
        children: [
            { title: "1.1 Introduction", page: 5 },
            { title: "1.2 Methods", page: 8 },
            { title: "1.3 Results", page: 12 }
        ]
    },
    {
        title: "Chapter 2",
        page: 20
    }
]
```

--------------------------------

### Implement custom navigation controls

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-navigation.md

Example showing how to integrate custom HTML buttons and inputs with the DFLIP instance to control page navigation.

```html
<div id="my_flipbook"></div>

<div class="nav-buttons">
    <button onclick="goToPage(1)">First</button>
    <button onclick="previousPage()">Previous</button>
    <button onclick="nextPage()">Next</button>
    <button onclick="goToPage(999)">Last</button>
    <input type="number" id="page-input" min="1" placeholder="Page #" onchange="jumpToPage()">
</div>

<script>
var option_my_flipbook = {
    source: 'document.pdf',
    openPage: 1
};

function previousPage() {
    if (typeof DFLIP !== 'undefined' && DFLIP.initInstance) {
        DFLIP.initInstance.target.prev();
    }
}

function nextPage() {
    if (typeof DFLIP !== 'undefined' && DFLIP.initInstance) {
        DFLIP.initInstance.target.next();
    }
}

function goToPage(pageNum) {
    if (typeof DFLIP !== 'undefined' && DFLIP.initInstance) {
        DFLIP.initInstance.target.gotoPage(pageNum);
    }
}

function jumpToPage() {
    var input = document.getElementById('page-input');
    goToPage(parseInt(input.value, 10));
}
</script>
```

--------------------------------

### Install DearFlip via npm

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

Use this command to add the package to your project dependencies.

```bash
npm install @dearhive/dearflip-jquery-flipbook
```

--------------------------------

### Initialize PDF Annotations

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Configures PDF annotations with custom styling and triggers setup upon flipbook load.

```javascript
setupAnnotations()
```

```javascript
// Setup annotations with custom styling
var option_pdf_annotated = {
    source: 'annotated.pdf',
    annotationClass: 'custom-annotation-style',
    onLoad: function(flipbook) {
        flipbook.setupAnnotations();
    }
};
```

--------------------------------

### Lightbox Flipbook Modal Setup

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/usage-examples.md

Integrates DearFlip into a page using button triggers. Requires jQuery and the dFlip library files to be loaded.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flipbook Lightbox</title>
    <link href="path/to/dflip/css/dflip.min.css" rel="stylesheet">
    <link href="path/to/dflip/css/themify-icons.min.css" rel="stylesheet">
    
    <style>
        .button-group {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }
        
        .pdf-button {
            background: #667eea;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .pdf-button:hover {
            background: #5568d3;
        }
    </style>
</head>
<body>
    <h1>Document Library</h1>
    
    <div class="button-group">
        <div class="_df_button" id="btn_manual">View Manual</div>
        <div class="_df_button" id="btn_guide">View Guide</div>
        <div class="_df_button" id="btn_report">View Report</div>
    </div>
    
    <script src="path/to/dflip/js/libs/jquery.min.js"></script>
    <script src="path/to/dflip/js/dflip.min.js"></script>
    
    <script>
        // Manual PDF
        var option_btn_manual = {
            source: 'documents/user-manual.pdf',
            webgl: true,
            height: 600,
            enableDownload: true
        };
        
        // Guide PDF
        var option_btn_guide = {
            source: 'documents/quick-guide.pdf',
            webgl: true,
            height: 600
        };
        
        // Report PDF
        var option_btn_report = {
            source: 'documents/annual-report.pdf',
            webgl: true,
            height: 600,
            autoEnableOutline: true,
            autoEnableThumbnail: true
        };
    </script>
</body>
</html>
```

--------------------------------

### frontImage()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the front-side image for a page.

```APIDOC
## frontImage()

### Description
Get or set the front-side image for a page.

### Signature
`frontImage(imageSource)`

### Parameters
- **imageSource** (string | HTMLImageElement) - Optional - Image URL or Image element.

### Return Value
- When called without arguments: returns current front image (string or element)
- When called with `imageSource`: void

### Example
```javascript
// Get front image URL
var frontUrl = flipbook.target.frontImage();

// Set front image
flipbook.target.frontImage('path/to/page-front.jpg');
```
```

--------------------------------

### Configure SINGLE_PAGE_MODE in options

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/enumerations.md

Example of setting singlePageMode within the flipbook configuration object.

```javascript
var option_my_book = {
    pageMode: DFLIP.PAGE_MODE.SINGLE,
    singlePageMode: DFLIP.SINGLE_PAGE_MODE.BOOKLET
};
```

--------------------------------

### height()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-display.md

Get or set the flipbook container height.

```APIDOC
## height(newHeight)

### Description
Get or set the flipbook container height. When called without arguments, it returns the current height; when called with a value, it updates the height.

### Parameters
- **newHeight** (number | string) - Optional - Height in pixels or "auto"

### Return Value
- Returns current height (number) if no argument is provided, otherwise returns void.

### Example
```javascript
// Get current height
var currentHeight = flipbook.height();

// Set new height
flipbook.height(700);
```
```

--------------------------------

### width()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-display.md

Get or set the flipbook container width.

```APIDOC
## width(newWidth)

### Description
Get or set the flipbook container width. When called without arguments, it returns the current width; when called with a value, it updates the width.

### Parameters
- **newWidth** (number | string) - Optional - Width in pixels

### Return Value
- Returns current width (number) if no argument is provided, otherwise returns void.

### Example
```javascript
// Get current width
var currentWidth = flipbook.width();

// Set new width
flipbook.width(1200);
```
```

--------------------------------

### shininess()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the material shininess for 3D rendering.

```APIDOC
## shininess(value)

### Description
Get or set the material shininess for 3D rendering. Only affects 3D WebGL rendering.

### Signature
`shininess(value)`

### Parameters
- **value** (number) - Optional - Shininess value (0.0 - 1.0 or higher)

### Return Value
- When called without arguments: returns current shininess (number)
- When called with value: void

### Example
```javascript
flipbook.target.shininess(0.8);
```
```

--------------------------------

### Configure PAGE_MODE in options

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/enumerations.md

Example of setting the pageMode property within the flipbook configuration object.

```javascript
var option_my_book = {
    pageMode: DFLIP.PAGE_MODE.DOUBLE
};
```

--------------------------------

### backImage()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the back-side image for a page.

```APIDOC
## backImage()

### Description
Get or set the back-side image for a page. Only relevant for pages with double-sided content.

### Signature
`backImage(imageSource)`

### Parameters
- **imageSource** (string | HTMLImageElement) - Optional - Image URL or Image element.

### Return Value
- When called without arguments: returns current back image (string or element)
- When called with `imageSource`: void

### Example
```javascript
// Get back image
var backUrl = flipbook.target.backImage();

// Set back image
flipbook.target.backImage('path/to/page-back.jpg');
```
```

--------------------------------

### setupAnnotations()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Prepares PDF annotations for display and interaction. This method parses PDF annotation objects and creates interactive overlays.

```APIDOC
## setupAnnotations()

### Description
Prepare PDF annotations for display and interaction. This method parses PDF annotation objects and creates clickable/interactive annotation overlays.

### Signature
`setupAnnotations()`

### Parameters
- None

### Return Value
- void

### Behavior
- Parses PDF annotation objects
- Creates clickable/interactive annotation overlays
- Applies custom annotation styling via `annotationClass`
- Only works for PDF sources

### Supported Annotation Types
- Text annotations (comments)
- Highlight annotations
- Underline/strikethrough
- Ink annotations (freehand drawings)
```

--------------------------------

### DFLIP.initInstance

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/INDEX.md

Initializes a new flipbook instance within a specified container element.

```APIDOC
## DFLIP.initInstance

### Description
Initializes a flipbook instance. The flipbook is typically attached to a container element with class `_df_book`, `_df_button`, or `_df_thumb`.

### Usage
`DFLIP.initInstance(container, options)`

### Parameters
- **container** (Element) - The DOM element to initialize the flipbook within.
- **options** (Object) - Configuration options for the flipbook instance.
```

--------------------------------

### Debug Library and Instance

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

Verify the library is loaded and inspect the current flipbook instance properties.

```javascript
console.log(typeof DFLIP);          // "object"
console.log(DFLIP.version);         // "1.7.36"
```

```javascript
console.log(DFLIP.initInstance);
console.log(DFLIP.initInstance.target.pageCount);
console.log(DFLIP.initInstance.target.mode);  // "webgl" or "css"
```

--------------------------------

### HTML Initialization Patterns

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Describes how to initialize flipbooks using specific HTML classes and attributes.

```APIDOC
## HTML Initialization

### Description
Initialize flipbooks by adding specific classes to container elements. The library automatically detects these elements.

### Supported Classes
- **_df_book**: Renders an embedded flipbook directly in the page.
- **_df_button**: Creates a button that opens the flipbook in a lightbox modal.
- **_df_thumb**: Creates a thumbnail image that acts as a trigger for a lightbox modal.

### Attributes
- **source** (string) - Required - The path to the PDF document.
- **thumb** (string) - Optional - The path to the thumbnail image (used with _df_thumb).
```

--------------------------------

### activePage()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-navigation.md

Gets or sets the currently active page in the flipbook.

```APIDOC
## activePage(pageNumber)

### Description
Gets or sets the currently active page. When called without arguments, it returns the current page number; when called with a page number, it navigates to that page.

### Parameters
- **pageNumber** (number) - Optional - Page number to navigate to (1-indexed)

### Return Value
- Returns the current page number (number) if no argument is provided, otherwise returns void.

### Example
```javascript
// Get current page
var currentPage = flipbook.target.activePage();

// Set active page
flipbook.target.activePage(10);
```
```

--------------------------------

### Get target page in JavaScript

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Retrieves the page object currently intended for display.

```javascript
getTargetPage()
```

```javascript
// Get page that should currently be visible
var visible = flipbook.target.getTargetPage();
console.log('Showing page:', visible.number);
```

--------------------------------

### Initialize via HTML Markup

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Use specific CSS classes on container elements to define flipbook behavior and source files.

```html
<!-- Embedded flipbook -->
<div class="_df_book" source="path/to/document.pdf"></div>

<!-- Button that opens flipbook in lightbox -->
<div class="_df_button" source="path/to/document.pdf">Open Book</div>

<!-- Thumbnail/image trigger for lightbox -->
<div class="_df_thumb" source="path/to/document.pdf" thumb="path/to/thumbnail.jpg">View</div>
```

--------------------------------

### Configure Flipbook Script and Container

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/troubleshooting.md

Ensure correct loading order for CSS and JS files, and verify the container class is set to _df_book.

```html
<!-- Correct order of script includes -->
<link href="dflip/css/dflip.min.css" rel="stylesheet">
<link href="dflip/css/themify-icons.min.css" rel="stylesheet">

<!-- jQuery MUST load before dflip -->
<script src="jquery.min.js"></script>
<script src="dflip/js/dflip.min.js"></script>

<!-- Container with correct class -->
<div class="_df_book" source="document.pdf"></div>
```

--------------------------------

### Advanced onLoad Callback Usage

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/events-and-callbacks.md

Shows how to use the flipbook instance to initialize custom controls, tracking, and verify content properties.

```javascript
var option_complete = {
    source: 'manual.pdf',
    height: 600,
    webgl: true,
    
    onLoad: function(flipbook) {
        // Setup tracking
        setupFlipbookTracking(flipbook);
        
        // Initialize custom controls
        initCustomNavigation(flipbook);
        
        // Verify content
        if (flipbook.target.pageCount === 0) {
            console.error('No pages in document!');
        } else {
            console.log('Flipbook ready with', flipbook.target.pageCount, 'pages');
            
            // Log capabilities
            console.log('WebGL enabled:', flipbook.target.mode === 'webgl');
            console.log('Page mode:', flipbook.target.pageMode);
        }
    }
};
```

--------------------------------

### Initialize multiple flipbooks

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/configuration.md

Demonstrates how to define unique configuration variables for multiple flipbook containers on the same page.

```html
<div id="book1"></div>
<div id="book2"></div>

<script>
var option_book1 = { source: 'doc1.pdf', webgl: true };
var option_book2 = { source: 'doc2.pdf', height: 400 };
</script>
```

--------------------------------

### Configure CONTROLSPOSITION in options

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/enumerations.md

Example of setting the controlsPosition property within the flipbook configuration object.

```javascript
var option_my_book = {
    controlsPosition: DFLIP.CONTROLSPOSITION.BOTTOM
};
```

--------------------------------

### UI and State Management

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/INDEX.md

Methods for initializing UI components and managing the flipbook lifecycle.

```APIDOC
## UI & State

- `initOutline(data?)`: Initialize bookmarks.
- `initThumbs()`: Initialize the thumbnail strip.
- `setupAnnotations()`: Setup PDF annotations.
- `refresh()`: Redraw the current page.
- `reset()`: Reset the flipbook to its initial state.
- `dispose()`: Cleanup and remove the flipbook instance.
```

--------------------------------

### Manage back page image in JavaScript

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the back-side image source for double-sided pages.

```javascript
backImage(imageSource)
```

```javascript
// Get back image
var backUrl = flipbook.target.backImage();

// Set back image
flipbook.target.backImage('path/to/page-back.jpg');
```

--------------------------------

### initOutline()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Initializes and displays the outline or bookmarks panel for the flipbook.

```APIDOC
## initOutline()

### Description
Initializes and displays the outline/bookmarks panel from the PDF or a custom structure.

### Signature
`initOutline(outlineData)`

### Parameters
- **outlineData** (array) - Optional - Custom outline structure; if omitted, uses the PDF outline.

### Return Value
- **void**

### Behavior
- Extracts table of contents from PDF if available.
- Creates clickable navigation links to chapters/sections.
- Builds hierarchical bookmark structure.
- Replaces auto-generated outline if `overwritePDFOutline: true` is set.

### Example
```javascript
// Use PDF outline
flipbook.initOutline();

// Custom outline
flipbook.initOutline([
    { title: "Cover", page: 1 },
    { title: "Introduction", page: 3 },
    { title: "Main Content", page: 5 }
]);
```
```

--------------------------------

### Image Gallery Flipbook Configuration

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/usage-examples.md

Initializes a flipbook from an array of image URLs using a JavaScript options object. Ensure the container element exists before script execution.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Image Flipbook</title>
    <link href="path/to/dflip/css/dflip.min.css" rel="stylesheet">
    <link href="path/to/dflip/css/themify-icons.min.css" rel="stylesheet">
</head>
<body>
    <div id="image_gallery"></div>
    
    <script src="path/to/dflip/js/libs/jquery.min.js"></script>
    <script src="path/to/dflip/js/dflip.min.js"></script>
    
    <script>
        // Configure as options variable
        var option_image_gallery = {
            source: [
                'images/photo1.jpg',
                'images/photo2.jpg',
                'images/photo3.jpg',
                'images/photo4.jpg'
            ],
            webgl: true,
            height: 600,
            direction: DFLIP.DIRECTION.LTR,
            pageMode: DFLIP.PAGE_MODE.DOUBLE
        };
    </script>
</body>
</html>
```

--------------------------------

### Control auto-play functionality

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-display.md

Use this method to programmatically start, stop, or toggle the automatic page flipping feature.

```javascript
// Start auto-flipping
flipbook.setAutoPlay(true);

// Stop auto-flipping
flipbook.setAutoPlay(false);

// Toggle auto-play
var isPlaying = flipbook.target.autoPlay;
flipbook.setAutoPlay(!isPlaying);
```

--------------------------------

### Initialize Image Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/README.md

Define the container element and the corresponding configuration object with an array of image source URLs.

```javascript
<div class="_df_book" id="book_image"></div>

//Just add option_ in front of the element id to create the required option variable
var option_book_image = {
     source : ['http://www.yoursite.com/books/thumbs/alice.jpg',
               'http://www.yoursite.com/books/thumbs/dflip.jpg',
               'http://www.yoursite.com/books/thumbs/nightangle.jpg'],
     webgl:true
};
```

--------------------------------

### Direct Initialization

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Manually trigger library initialization after the page has loaded.

```javascript
// Initialize after page load
if (typeof DFLIP !== 'undefined') {
    DFLIP.init();
}
```

--------------------------------

### Get or set flipbook width

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-display.md

Use this method to retrieve the current container width or update it using pixel values.

```javascript
// Get current width
var currentWidth = flipbook.width();

// Set new width
flipbook.width(1200);
```

--------------------------------

### Minimal HTML Implementation

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

A basic boilerplate showing the required CSS links, the flipbook container element, and the necessary script tags.

```html
<!DOCTYPE html>
<html>
<head>
    <link href="dflip/css/dflip.min.css" rel="stylesheet">
    <link href="dflip/css/themify-icons.min.css" rel="stylesheet">
</head>
<body>
    <div class="_df_book" source="document.pdf"></div>
    
    <script src="dflip/js/libs/jquery.min.js"></script>
    <script src="dflip/js/dflip.min.js"></script>
</body>
</html>
```

--------------------------------

### Get or set flipbook height

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-display.md

Use this method to retrieve the current container height or update it using pixels or 'auto'.

```javascript
// Get current height
var currentHeight = flipbook.height();
console.log('Height:', currentHeight, 'pixels');

// Set new height
flipbook.height(700);

// Auto height
flipbook.height('auto');
```

--------------------------------

### Get and set active page

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-navigation.md

Use activePage to retrieve the current page number or jump to a specific page index.

```javascript
// Get current page
var currentPage = flipbook.target.activePage();
console.log('Currently on page:', currentPage);

// Set active page
flipbook.target.activePage(10);
```

--------------------------------

### Basic onLoad Callback Implementation

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/events-and-callbacks.md

Demonstrates the basic structure of the onLoad callback within the flipbook options object.

```javascript
var option_book = {
    source: 'document.pdf',
    onLoad: function(flipbook) {
        // Flipbook ready
        console.log('Flipbook loaded');
        console.log('Pages:', flipbook.target.pageCount);
    }
};
```

--------------------------------

### preFlipCallback

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/events-and-callbacks.md

Fires immediately before a page flip animation starts. Useful for UI transitions, tracking reading speed, or pausing other animations.

```APIDOC
## preFlipCallback

### Description
Fires immediately before a page flip animation begins. This callback only triggers for actual flips, not for jumps.

### Signature
```javascript
flipbook.target.preFlipCallback = function() {
    // About to flip page
};
```
```

--------------------------------

### Documentation File Size Overview

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/INDEX.md

A list of documentation files and their respective sizes in kilobytes.

```text
README.md                        15 KB
usage-examples.md               18 KB
troubleshooting.md              12 KB
types.md                        11 KB
api-reference-navigation.md      7 KB
api-reference-content.md        10 KB
api-reference-ui-controls.md     9 KB
api-reference-display.md         8 KB
configuration.md                 8 KB
browser-compatibility.md         8 KB
events-and-callbacks.md         10 KB
enumerations.md                  6 KB
overview.md                      3 KB
initialization.md                5 KB
───────────────────────────────────
TOTAL                          156 KB
```

--------------------------------

### DFLIP.init()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Manually triggers the initialization of flipbooks on the page. This is typically called after the page has finished loading.

```APIDOC
## DFLIP.init()

### Description
Manually initializes all flipbook elements detected on the page. This should be called after the DOM is ready.

### Method
JavaScript Function

### Usage
```javascript
if (typeof DFLIP !== 'undefined') {
    DFLIP.init();
}
```
```

--------------------------------

### bumpScale(value)

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Get or set the bump/normal map scale for 3D rendering. This method controls surface texture depth perception in WebGL mode.

```APIDOC
## bumpScale(value)

### Description
Get or set the bump/normal map scale for 3D rendering. Only affects 3D WebGL rendering.

### Signature
`bumpScale(value)`

### Parameters
- **value** (number) - Optional - Scale factor for bump mapping.

### Return Value
- Returns current bump scale (number) if called without arguments.
- Returns void if called with `value`.

### Examples
```javascript
// Get current bump scale
var bumpAmount = flipbook.target.bumpScale();

// Increase surface texture detail
flipbook.target.bumpScale(1.5);
```
```

--------------------------------

### Load DearFlip via CDN

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Include the required CSS and JS files from the jsDelivr CDN. Ensure jQuery is loaded before the DearFlip script.

```html
<!-- From jsDelivr CDN -->
<link href="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/css/dflip.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/css/themify-icons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/js/dflip.min.js"></script>
```

--------------------------------

### Manage material shininess in JavaScript

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the shininess factor for 3D WebGL rendering. Values range from 0.0 (matte) to higher values (glossy).

```javascript
// Get current shininess
var currentShine = flipbook.target.shininess();

// Set high gloss
flipbook.target.shininess(0.8);

// Set matte finish
flipbook.target.shininess(0.1);
```

--------------------------------

### Configure Desktop Flipbook Settings

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/browser-compatibility.md

Use these settings for high-end desktop environments to enable WebGL and higher texture resolutions.

```javascript
var option_desktop = {
    webgl: true,
    maxTextureSize: 2048,
    minTextureSize: 512,
    duration: 700,
    webglShadow: true
};
```

--------------------------------

### Manage front page image in JavaScript

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-content.md

Gets or sets the front-side image source. Changing the image triggers a texture reload and manages internal caching.

```javascript
frontImage(imageSource)
```

```javascript
// Get front image URL
var frontUrl = flipbook.target.frontImage();

// Set front image
flipbook.target.frontImage('path/to/page-front.jpg');
```

--------------------------------

### Configure Options via JavaScript

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Define configuration objects using the 'option_' prefix followed by the element ID to automatically apply settings.

```html
<div id="my_flipbook"></div>

<script>
var option_my_flipbook = {
    source: 'path/to/document.pdf',
    webgl: true,
    height: 600,
    backgroundColor: '#ffffff'
};
</script>
```

--------------------------------

### Display a PDF Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

Initialize a flipbook using a PDF source file.

```javascript
var option_pdf = {
    source: 'manual.pdf',
    height: 600,
    webgl: true
};
```

--------------------------------

### Initialize Outline and Thumbnails

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/troubleshooting.md

Enable outline and thumbnail features, with fallback logic to initialize them manually if missing from the PDF.

```javascript
var option_outline = {
    source: 'document.pdf',
    autoEnableOutline: true,
    autoEnableThumbnail: true,
    onLoad: function(flipbook) {
        // Verify they loaded
        if (!flipbook.target.outline) {
            console.warn('No outline in PDF');
            // Provide custom outline
            flipbook.initOutline([
                { title: 'Chapter 1', page: 1 },
                { title: 'Chapter 2', page: 15 }
            ]);
        }
        
        if (!flipbook.target.thumblist) {
            console.warn('Thumbnails not initialized');
            flipbook.initThumbs();
        }
    }
};
```

--------------------------------

### Initialize PDF Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/README.md

Define the container element and the corresponding configuration object with the PDF source URL.

```javascript
<div class="_df_book" id="book_pdf"></div>

//Just add option_ in front of the element id to create the required option variable
var option_book_pdf = {
     source:'http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf',
     webgl:true
};
```

--------------------------------

### DFLIP.init()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Manually triggers the initialization of DearFlip elements if the automatic DOM-ready process is insufficient.

```APIDOC
## DFLIP.init()

### Description
Manually initializes all elements with classes `_df_book`, `_df_button`, or `_df_thumb`.

### Usage
```javascript
if (typeof DFLIP !== 'undefined' && DFLIP.init) {
    DFLIP.init();
}
```
```

--------------------------------

### Basic PDF Flipbook Implementation

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/usage-examples.md

Uses the _df_book class to automatically render a PDF flipbook from a source file path. Requires jQuery and the DearFlip CSS/JS libraries.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flipbook</title>
    
    <!-- Required stylesheets -->
    <link href="path/to/dflip/css/dflip.min.css" rel="stylesheet">
    <link href="path/to/dflip/css/themify-icons.min.css" rel="stylesheet">
    
    <style>
        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
        .container { max-width: 1200px; margin: 0 auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Document</h1>
        <!-- Flipbook container -->
        <div class="_df_book" source="documents/my-document.pdf"></div>
    </div>
    
    <!-- Required scripts -->
    <script src="path/to/dflip/js/libs/jquery.min.js"></script>
    <script src="path/to/dflip/js/dflip.min.js"></script>
</body>
</html>
```

--------------------------------

### Initialize Outline

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Initializes the outline panel using either the default PDF structure or a custom array.

```javascript
// Use PDF outline
flipbook.initOutline();

// Custom outline
flipbook.initOutline([
    { title: "Cover", page: 1 },
    { title: "Introduction", page: 3 },
    { title: "Main Content", page: 5 }
]);
```

--------------------------------

### Basic HTML Template

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/README.md

Standard boilerplate for including necessary CSS and JS files to initialize a flipbook.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Template</title>

<!-- Flipbook StyleSheets -->
<link href="http://www.yoursite.com/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<!-- themify-icons.min.css is not required in version 2.0 and above -->
<link href="http://www.yoursite.com/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">

</head>
<body>
<div class="_df_book" id="flipbok_example" source="location of pdf.pdf"></div>

<!-- Scripts -->
<script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

</body>
</html>
```

--------------------------------

### Configure Image Array Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Set up a flipbook using an array of image URLs with specific rendering and direction options.

```javascript
var option_image_book = {
    source: [
        'images/page1.jpg',
        'images/page2.jpg',
        'images/page3.jpg'
    ],
    webgl: true,
    direction: DFLIP.DIRECTION.LTR
};
```

--------------------------------

### JavaScript Options Configuration

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Describes how to configure flipbooks using a naming convention for options objects.

```APIDOC
## JavaScript Configuration

### Description
Configure flipbook settings by defining a global JavaScript object named with the prefix 'option_' followed by the element's ID.

### Usage
```html
<div id="my_flipbook"></div>

<script>
var option_my_flipbook = {
    source: 'path/to/document.pdf',
    webgl: true,
    height: 600,
    backgroundColor: '#ffffff'
};
</script>
```
```

--------------------------------

### initThumbs()

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Initializes and displays the thumbnail strip for quick page navigation.

```APIDOC
## initThumbs()

### Description
Initializes and displays the thumbnail strip for the flipbook.

### Signature
`initThumbs()`

### Parameters
None

### Return Value
- **void**

### Behavior
- Generates thumbnail previews for all pages.
- Creates scrollable thumbnail panel.
- Enables quick page jumping via thumbnail click.
- Auto-hides if not enough space available.

### Example
```javascript
// Initialize thumbnails
flipbook.initThumbs();
```
```

--------------------------------

### Apply conditional configuration

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/enumerations.md

Configure flipbook options dynamically based on device type or language settings.

```javascript
var option_adaptive_book = {
    source: 'document.pdf',
    pageMode: isMobileDevice() 
        ? DFLIP.PAGE_MODE.SINGLE 
        : DFLIP.PAGE_MODE.DOUBLE,
    direction: isRTLLanguage()
        ? DFLIP.DIRECTION.RTL
        : DFLIP.DIRECTION.LTR
};

function isMobileDevice() {
    return window.innerWidth < 768;
}

function isRTLLanguage() {
    return document.documentElement.lang === 'ar';
}
```

--------------------------------

### PreviewObject Methods

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/types.md

Methods available on the flipbook instance to control navigation, zoom, and layout.

```APIDOC
## PreviewObject Methods

### Navigation
- **start()**: Go to first page.
- **end()**: Go to last page.
- **next()**: Go to next page.
- **prev()**: Go to previous page.

### Display and Layout
- **zoom(direction)**: Zoom in/out.
- **resize()**: Recalculate layout.
- **height(h?)**: Get or set height.
- **width(w?)**: Get or set width.
- **checkCenter(event?)**: Recenter content.

### Configuration
- **setDuration(ms)**: Set animation duration.
- **setAutoPlay(enabled)**: Control auto-flip.
- **setPageMode(mode)**: Switch page mode.

### Lifecycle
- **dispose()**: Cleanup instance.
```

--------------------------------

### PreviewObject Instance Structure

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/types.md

Represents the main flipbook instance, containing state, display information, methods, and callbacks.

```javascript
{
    // State
    target: Book,                      // The 3D book object
    stage: THREE.Scene,               // Three.js scene (WebGL mode)
    container: jQuery,                // jQuery-wrapped container element
    contentProvider: ContentProvider,  // Content manager
    ui: UIControls,                   // UI manager
    
    // Display info
    mode: string,                     // "webgl" or "css"
    zoomValue: number,                // Current zoom multiplier (1.0+)
    options: ConfigurationObject,     // Current configuration
    
    // Methods
    start(): void,                    // Go to first page
    end(): void,                      // Go to last page
    next(): void,                     // Next page
    prev(): void,                     // Previous page
    zoom(direction): void,            // Zoom in/out
    resize(): void,                   // Recalculate layout
    height(h?): number|void,          // Get/set height
    width(w?): number|void,           // Get/set width
    setDuration(ms): void,            // Set animation duration
    setAutoPlay(enabled): void,       // Control auto-flip
    setPageMode(mode): void,          // Switch page mode
    checkCenter(event?): void,        // Recenter content
    
    // Callbacks
    dispose(): void,                  // Cleanup
    
    // Properties
    autoPlayTimer: number,            // Interval ID for auto-play
    zoomTween: TWEEN.Tween,          // Animation tweener
}
```

--------------------------------

### Display Images as Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/README.md

Initialize a flipbook using an array of image URLs.

```javascript
var option_images = {
    source: ['page1.jpg', 'page2.jpg', 'page3.jpg'],
    pageMode: DFLIP.PAGE_MODE.DOUBLE
};
```

--------------------------------

### Configure Low-End Device Flipbook Settings

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/browser-compatibility.md

Fallback configuration for low-end devices, disabling WebGL and intensive features to ensure stability.

```javascript
var option_lowend = {
    webgl: false,  // Use HTML 2D rendering
    height: 'auto',
    pageMode: DFLIP.PAGE_MODE.SINGLE,
    enableDownload: true,
    search: false  // Disable intensive features
};
```

--------------------------------

### Define Configuration Object structure

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/types.md

Defines the complete options object passed to flipbook initialization.

```javascript
{
    // Content source (required)
    source: string | Array<string>,
    
    // Display dimensions
    height: number | string,           // "auto" or pixels
    width: number,
    
    // Page navigation
    openPage: number,                  // Starting page (default: 1)
    pageMode: DFLIP.PAGE_MODE,         // SINGLE | DOUBLE | AUTO
    singlePageMode: DFLIP.SINGLE_PAGE_MODE,  // ZOOM | BOOKLET | AUTO
    direction: DFLIP.DIRECTION,        // LTR | RTL
    
    // Rendering
    webgl: boolean,                    // Enable 3D WebGL
    webglShadow: boolean,              // Enable shadows in 3D
    backgroundColor: string,           // Hex or named color
    transparent: boolean,              // Transparent background
    forceFit: boolean,                 // Force fit in container
    
    // Animation & interaction
    duration: number,                  // Flip animation duration (ms)
    autoPlay: boolean,                 // Enable auto-flip
    autoPlayDuration: number,          // Delay between auto-flips (ms)
    autoPlayStart: boolean,            // Start auto-play on load
    soundEnable: boolean,              // Enable page turn sounds
    
    // 3D quality
    maxTextureSize: number,            // Max texture resolution
    minTextureSize: number,            // Min texture resolution
    webglShadow: boolean,              // Enable 3D shadows
    hard: string,                      // Hardcover effect
    
    // PDF options
    rangeChunkSize: number,            // Chunk size for streaming
    disableRange: boolean,             // Disable HTTP range requests
    disableFontFace: boolean,          // Disable web fonts
    disableAutoFetch: boolean,         // Disable auto full-fetch
    disableStream: boolean,            // Process entire PDF at once
    docParameters: object,             // Additional pdf.js options
    
    // Features
    search: boolean,                   // Enable text search
    enableDownload: boolean,           // Show download button
    autoEnableOutline: boolean,        // Auto-load bookmarks
    autoEnableThumbnail: boolean,      // Auto-load thumbnails
    overwritePDFOutline: boolean,      // Replace PDF outline
    
    // Structure
    outline: Array<OutlineItem>,       // Custom bookmarks
    links: Array<LinkDefinition>,      // Custom links
    annotations: boolean,              // Enable annotations
    annotationClass: string,           // CSS class for annotations
    html: object,                      // HTML content config
    isCrossOrigin: boolean,            // Mark as cross-origin
    
    // UI
    controlsPosition: DFLIP.CONTROLSPOSITION,  // TOP | BOTTOM | HIDDEN
    paddingTop: number,
    paddingRight: number,
    paddingBottom: number,
    paddingLeft: number,
    
    // Icons (Themify icon class names)
    icons: {
        next: string,
        prev: string,
        start: string,
        end: string,
        // ... 20+ more icon properties
    },
    
    // UI text
    text: {
        toggleSound: string,
        toggleThumbnails: string,
        toggleOutline: string,
        // ... 20+ more text properties
    },
    
    // Callbacks
    onLoad: function(flipbook),
    onPageFlip: function(page),
    // ... other callbacks
}
```

--------------------------------

### Include Required Scripts and Styles

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Load the necessary CSS and JS files in the specified order, ensuring jQuery is included before the DearFlip library.

```html
<!-- Stylesheet -->
<link href="path/to/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
<link href="path/to/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">

<!-- jQuery (required) -->
<script src="path/to/dflip/js/libs/jquery.min.js"></script>

<!-- DearFlip main library -->
<script src="path/to/dflip/js/dflip.min.js"></script>
```

--------------------------------

### Initialize Advanced PDF Flipbook

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/usage-examples.md

A complete HTML template including necessary CSS/JS dependencies and configuration options for search, thumbnails, and outline features.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Advanced Flipbook Demo</title>
    
    <link href="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/css/dflip.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/css/themify-icons.min.css" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f0f0;
            margin: 0;
            padding: 20px;
        }
        
        .flipbook-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .flipbook-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .flipbook-header h1 {
            margin: 0;
            font-size: 28px;
        }
        
        .flipbook-header p {
            margin: 8px 0 0 0;
            opacity: 0.9;
        }
        
        #advanced_pdf {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="flipbook-container">
        <div class="flipbook-header">
            <h1>Interactive PDF Flipbook</h1>
            <p>Navigate using controls or keyboard arrows</p>
        </div>
        
        <div id="advanced_pdf"></div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@dearhive/dearflip-jquery-flipbook@1.7.36/dflip/js/dflip.min.js"></script>
    
    <script>
        var option_advanced_pdf = {
            source: 'https://example.com/documents/manual.pdf',
            
            // Layout
            height: 600,
            pageMode: DFLIP.PAGE_MODE.DOUBLE,
            singlePageMode: DFLIP.SINGLE_PAGE_MODE.ZOOM,
            
            // Display
            webgl: true,
            webglShadow: true,
            backgroundColor: '#ffffff',
            
            // Animation
            duration: 700,
            
            // Features
            search: true,
            enableDownload: true,
            autoEnableOutline: true,
            autoEnableThumbnail: true,
            
            // PDF optimization
            rangeChunkSize: 262144,
            
            // Controls
            controlsPosition: DFLIP.CONTROLSPOSITION.BOTTOM,
            
            // Callback
            onLoad: function(flipbook) {
                console.log('Flipbook loaded with', flipbook.target.pageCount, 'pages');
                setupTracking(flipbook);
            }
        };
        
        function setupTracking(flipbook) {
            flipbook.target.flipCallback = function() {
                var page = flipbook.target._activePage;
                var total = flipbook.target.pageCount;
                console.log('Currently viewing page', page, 'of', total);
            };
        }
    </script>
</body>
</html>
```

--------------------------------

### Create FlipBook with HTML

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/examples/basic-example.html

Use this HTML structure to create a FlipBook. Ensure the necessary files are included. The 'source' attribute points to the PDF file.

```html
<div class="_df_book" source="http://www.yourssite.com/books/dflip manual.pdf"></div>
```

--------------------------------

### Implement Custom Outline Navigation

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/api-reference-ui-controls.md

Initializes a custom outline structure and binds it to a sidebar navigation element. Requires an existing flipbook instance and a DOM element with the ID 'outline-nav'.

```javascript
// Create custom outline navigator
function setupCustomOutlineNav(flipbook) {
    var outline = [
        { title: "Introduction", page: 1 },
        { title: "Chapter 1: Basics", page: 3, children: [
            { title: "1.1 Overview", page: 3 },
            { title: "1.2 Details", page: 8 }
        ]},
        { title: "Chapter 2: Advanced", page: 15 },
        { title: "Conclusion", page: 30 }
    ];
    
    flipbook.initOutline(outline);
    
    // Also create sidebar nav
    createOutlineSidebar(outline, function(page) {
        flipbook.target.gotoPage(page);
    });
}

function createOutlineSidebar(outline, onPageSelect) {
    var nav = document.getElementById('outline-nav');
    
    outline.forEach(function(item) {
        var link = document.createElement('a');
        link.textContent = item.title;
        link.onclick = function(e) {
            e.preventDefault();
            onPageSelect(item.page);
        };
        nav.appendChild(link);
    });
}
```

--------------------------------

### Verify Library Loading in Console

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/troubleshooting.md

Check if jQuery and DFLIP are correctly initialized in the browser console.

```javascript
// Verify jQuery loaded
typeof jQuery !== 'undefined'  // Should be true

// Verify DFLIP loaded
typeof DFLIP !== 'undefined'  // Should be true

// Check for errors
DFLIP.version  // Should show version number
```

--------------------------------

### Validate Library Initialization

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/initialization.md

Verify that jQuery and the DFLIP library are correctly loaded before attempting to initialize flipbooks.

```javascript
// Ensure jQuery and DFLIP are available
if (typeof jQuery === 'undefined') {
    console.error('jQuery is required');
}

if (typeof DFLIP === 'undefined') {
    console.error('DFLIP library not loaded');
} else {
    console.log('DFLIP version:', DFLIP.version);
}
```

--------------------------------

### Implement preFlipCallback and flipCallback

Source: https://github.com/dearhive/dearflip-js-flipbook/blob/master/_autodocs/events-and-callbacks.md

Use these callbacks to manage UI states like loading spinners or timers during the flip transition.

```javascript
flipbook.target.preFlipCallback = function() {
    var fromPage = flipbook.target._activePage;
    console.log('Flipping from page:', fromPage);
    document.body.classList.add('flipping');
    startFlipTimer();
};

flipbook.target.flipCallback = function() {
    document.body.classList.remove('flipping');
    recordFlipDuration();
};
```