Nishvault / Turnmere / Image catalog guide

Build an image catalog flipbook with Turnmere

A short image catalog needs a clear sequence, readable pages and a file you can reopen. Turnmere combines a jQuery flipbook reader with a local image-book studio, editable JSON backups and a standalone HTML export.

This guide makes a Studio Proof — three-page catalog from the first three supplied Field Notes pages. They are original fictional editorial illustrations with geometric shapes and sample text, not customer work, product listings or photographs. The exercise changes captions and page order; it does not edit text already drawn inside the image.

Choose the free reader or the developer package

Open the free Field Notes flipbook to try the filled four-page reader. The free reader ZIP carries the same fixed book under its free-use terms. It includes no image editor, project importer or configurable developer package.

The developer package is $19.00 USD, one-time. Applicable taxes calculated at checkout. It includes the editable studio, configurable plugin, ordered image pages, JSON backup, standalone HTML export, examples and documentation. The editing steps below require that package. No account, service API or runtime build is needed to run its local customer files.

Reduce the sample to three pages

Extract the developer ZIP with app/, vendor/ and samples/ together, then open app/index.html. If your browser restricts local files, use the documented loopback-server option in the installation guide.

1. Choose Save project before replacing any custom work. Load the Field Notes example restores the sample and replaces the active draft.
2. Select the fourth page using the page selector or its numbered thumbnail. Confirm its title is “Leave space for the next thing,” then choose Remove page.
3. Keep the first three pages in order. Set Book title to “Studio Proof — three-page catalog” and enable Two-page spreads on wide screens.
4. Select each remaining page, enter its caption below, retain an accurate page description, and choose Apply settings before selecting another page.

Apply settings commits the form. Save project and Export standalone HTML use the applied book. A caption typed into a field is not included until applied. The original words inside each PNG remain unchanged; changing Page title edits the reader caption and navigation label.

Try Move earlier on page 3, then Move later to restore its position. Its image, title and description move together. Remove retains at least one page. To use your own artwork, Add image pages appends PNG, JPEG or WebP files in chooser order; it does not clear the sample. Select and remove unwanted sample pages deliberately after backing up.

Check spreads, the last page and Fit

With spread mode enabled, a book container at least 700 pixels wide shows two pages. A narrower container shows one; the container width matters even on a wide desktop screen. For this three-page book, the opening wide spread contains pages 1 and 2, and the final spread contains page 3 alone. This is reading pagination, not print imposition or an automatically offset cover layout.

Use Next, Previous, the page selector or numbered thumbnails. Focus the book region itself to use Left/Right, Home/End and plus/minus. Next moves through two-page groups in wide spread mode and one page at a time in narrow mode. Home returns to the first page; End selects the last.

Zoom 2× enlarges the content for closer inspection, which can require scrolling inside the stage. Fit returns to the fitted view and resets the stage’s zoom scroll. Check both the image and its caption on the first spread and the lone last page. Let the page-turn animation settle before judging its final bounds. Test your actual pages and viewport; a state value or a momentary animation measurement is not proof that every caption is visible.

The studio accepts up to 24 pages, 4 MiB per page, 24 million pixels per image and a 32 MiB embedded project. This version imports image pages, not PDF documents; PDF conversion, video pages, protected-content delivery and pinch zoom are outside its scope.

Back up the complete book and its reading position

Choose Save project after applying each page’s edits. JSON includes every embedded image, title, description, spread setting and selected page. Navigation updates the saved reading position. Return to page 1 before saving or exporting if you want the reader to open there.

Open project and select that downloaded JSON. Visit all three pages and check the captions, order and settings. Keep a separate downloaded copy before further changes; browser draft storage is a convenience and may run out of quota. A failed import should leave the valid book intact, so retain the original backup when testing replacements.

Choose Export standalone HTML and open the actual downloaded file. Verify the initial page, Next/End, Zoom and Fit at both a wide and narrow size. The HTML embeds the book images, jQuery, viewer runtime and styles; it has no external script, style, image or telemetry dependency. Share it intentionally because it contains your complete book content.

Embed the jQuery flipbook in an existing page

This example uses the first three images from the developer package with the practice captions. Save it as studio-proof.html at the extracted package root. Keep the relative asset paths, or adjust them for your own site. The free fixed-reader ZIP does not supply these configurable runtime files.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Studio Proof — three-page catalog</title>
<link rel="stylesheet" href="app/turnmere.css">
<h1>Studio Proof — three-page catalog</h1>
<div id="proof-catalog"></div>
<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="app/turnmere.js"></script>
<script>
jQuery('#proof-catalog').turnmere({
  title: 'Studio Proof — three-page catalog', page: 0, spread: true,
  pages: [
    {image: 'samples/page-1.png', title: 'Cover proof',
     alt: 'Fictional Field Notes cover with geometric shapes and the words Small ideas. Room to grow.'},
    {image: 'samples/page-2.png', title: 'Workshop proof',
     alt: 'Fictional workshop journal page with geometric shapes and the words Start with what you already have.'},
    {image: 'samples/page-3.png', title: 'Composition proof',
     alt: 'Fictional process journal page with geometric shapes and the words Arrange. Refine. Begin again.'}
  ]
});
</script>
</html>

Use jQuery('#proof-catalog').turnmere('goTo', 2) to select the third page; API page numbers are zero-based. The getState method reports page, pageCount, current spread mode and zoom. Give separate books unique host IDs. Destroy restores the original host content and disconnects the component’s listeners and observer; the included integration example covers two independent instances.

The exact initializer and studio workflow were exercised with the current source in local DOM tests, including page ordering, odd final-page navigation, applied captions and complete JSON save–open equality. Those checks simulate width, image loading and chooser APIs. They are not new browser rendering, settled Fit measurements or physical-device evidence. Test the finished downloaded output in your supported browser; do not disable your site’s content-security policy merely to run inline HTML.

Use and share within the included terms

The purchaser license permits use and customization of original Nishvault files in your own personal and commercial projects and sharing finished outputs. It excludes standalone resale or redistribution of the source/editor/plugin package. Preserve jQuery’s separate MIT rights. Setup documentation is included; guaranteed personal support, an SLA, update schedule or business-result guarantee is not.

Downloaded files contain no measurement adapter. The hosted product and free reader use fixed anonymous diagnostic counts that respect Do Not Track and Global Privacy Control and exclude images, book content and identifiers. Such events do not establish people, payment or sales. Use the product page to compare the fixed free reader with the editable developer package.