Preview out-of-bounds and bp generally not functioning in SvelteKit

[RustyLumberjack]

Steps to reproduce:

1. Create new sveltekit project (sveltekit 4)
2. Add bigger-picture and macy (or svelte-macy)
3. See that bigger-picture does not function

Screenshot 1:

Screenshot 2:

I tried creating a StackBlitz AND a CodeSandbox for this however I due to using the SSR workaround to load macy/bigger-picture it will not work on those platforms

Edit: Also wanted to note I used the svelte thumbnails example from here: https://github.com/henrygd/bigger-picture/blob/main/src/demo/bp-thumbnails.svelte

[henrygd]

Please share a repo if you can't get it to work on stackblitz.

There are a lot of sites using bigger-picture and sveltekit so it's most likely something related to your setup.

[RustyLumberjack]

@henrygd https://github.com/RustyLumberjack/sk-bp Okay I have made a repo sorry for all the spaghetti debug code

1. yarn
2. yarn dev
3. navigate to /gallery

As you can see in one attempt I was trying to fix it during onOpen event by adding tailwind classes to classlist and thankyou very much for fast reply if I can get this working i will make an example repo to help others

[henrygd]

Thanks, your main issue is that you never imported the styles like so:

import 'bigger-picture/css'

I created a pull request with a working gallery on /gallery-new.

I made independent actions for bigger-picture and macy to keep things clean.

Since you're using placeholders without height / width, I put some code in there to auto-update the height / width when the thumbnail loads, but you'd be better off if you could pass in the size of the full image at the start.

Not sure why the types aren't loading for the library. I'll look into it to see if it's a larger issue with the latest release.

Let me know if you have any questions.

[RustyLumberjack]

@henrygd THANKYOU!! YOU BEAUTIFUL WIZARD

Importing the css to the original component actually fixed it for the most part

I am going to work on making a second version of the new component you made to include the "thumbnail selector bar" at the bottom, as well as comprehending the sorcery you just added here so I can push an example for others

Thankyou so much for real

[henrygd]

No problem :+1:

[RustyLumberjack]

@henrygd Okay I have a follow up question if you don't mind, I cannot seem to get the thumbnails bar working yet as I can't find out how to access image list from within bp:

when you import import { biggerPicture } from '$lib/biggerPicture.js'; How to access the image list? biggerPicture.items does not work. On the return of that lib I tried returning items:

    return {
        destroy() {
            // @ts-ignore
            bp?.$destroy();
            // @ts-ignore
            bp = undefined;
        },
        // items() {
        //  node.querySelectorAll('a'),
        // // items() {
        // //   const items = node.querySelectorAll('a');
        // //   return items;
        // // }
    };

Then I tried exporting imageItems

export let imageItems: any;

export function getItems () {
    return imageItems;
}

export function biggerPicture(node: HTMLElement) {
    (async () => {
        if (!bp) {
            const BiggerPicture = (await import('bigger-picture/svelte')).default;
            bp = BiggerPicture({
                target: document.body
            });
        }
        // find links
        const items = node.querySelectorAll('a');
        imageItems = items;
        // loop and add click listener
        for (let el of items) {
            el.addEventListener('click', (e: Event) => {
                e.preventDefault();
                bp.open({
                    items,
                    el
                });
            });
        }
    })();

but neither of these worked when trying to run an each loop over them on the gallery page

[henrygd]

The image list is passed in via +page.ts.

See the Loading Data page in the sveltekit docs for more info.

As for thumbnails, you just use the thumbnails component instead of using bigger-picture directly. I just made another pr with the thumbnails on the new gallery page.