Function error

[ucin3d]

The functionalities provided by bigger-picture to handle lightboxes look great!

We are using Bootstrap in our project and followed the usage guidelines to implement bigger-picture (a couple responsive images in a page - no gallery) but could not make it work. We are definitely missing some step. Please could you confirm if the file to load for a HTML project (no Svelte) is: bigger-picture.min.js.

We got the following error: Uncaught TypeError: _bigger_pictureWEBPACK_IMPORTED_MODULE1default(...) is not a function

Here is the js code (same as usage recommendation):

import BiggerPicture from './bigger-picture' // initialize let bp = BiggerPicture({ target: document.body }) // open (will be a child of the target element above) bp.open({ items: document.querySelectorAll('#images a'), })

The line triggering the issue is: let bp = BiggerPicture({

[henrygd]

bigger-picture.min.js is an IIFE script that you could include in a script tag and puts BiggerPicture in the global namespace.

bigger-picture.min.mjs is a module script that can be used by importing.

Best option is to use a package manager like NPM or PNPM to install the script (npm install bigger-picture) then import the installed script with the statement below (no forward slash). Not sure what your setup is, but if you're using webpack this will probably work.

import BiggerPicture from 'bigger-picture'

[henrygd]

Did that help?

[ucin3d]

Yes it helped! Thank you for the feedback.

Installing via npm is not an option for our project, as it becomes unusable after adding any package with npm install.

We were able to get rid of the loading error and load 'bigger-picture' in the project following these steps:

1. Copied 'bigger-picture.min.mjs' to the folder 'src/js/modules'
2. Renamed the file to: bigger-picture.js
3. Loaded it via index.js: import "./modules/bigger-picture"

Using the suggested code the image automatically opens in the lightbox when the page loads:

bp.open({ items: document.querySelectorAll('#images a'), })

We are now working to open the images in a lightbox only on click/touch, as the images now open in a new tab.

[henrygd]

Gotcha, glad you got it working. For setting up click handlers you can reference the codesandbox linked in the readme:

https://codesandbox.io/s/bigger-picture-basic-gallery-o4kb82

There are other codesandboxes linked on the demo site as well, so hopefully that will have you covered.

[ucin3d]

I will check the link. Thanks!

[henrygd]

Did you get it figured out?

[ucin3d]

The example helped. Thanks!