Photo Browser for Book Covers

The Photo Browser is a Swiper-based gallery that opens as a standalone overlay (the default), a popup or a routed page, with pinch and double-tap zoom (3x by default) and swipe to close. Each photo is a URL, or an object with url (or html) and caption. Version 9 dropped its theme parameter: it follows the app's light or dark mode.

BookNest has no cover files, so coverUrl(book) in src/js/books.js draws each cover as an SVG with the book's gradient and title and returns it as a data:image/svg+xml URL. The Details tab shows it; a tap opens all six:

Opening the covers from the script of src/pages/book-details.f7JavaScript

    const openCovers = () => {
      browser = browser || $f7.photoBrowser.create({
        photos: books.map((b) => ({ url: coverUrl(b), caption: `${b.title}, ${b.author}` })),
        type: 'popup',
        navbarShowCount: true,
        on: { slideChange: () => console.log(`cover ${browser.activeIndex + 1} of 6`) },
      });
      browser.open(books.indexOf(book));
    };
    $onBeforeUnmount(() => browser && browser.destroy());

Tapping Salt and Saffron's cover, then the next arrow, logged cover 3 of 6 and cover 4 of 6: open(index) fires slideChange for the starting photo too. With type: 'page' the browser is a real page in the view, so Android's Back button closes it once the app runs under Cordova 129 or Capacitor 243,123 .

MENU

Photo Browser for Book Covers