Razor App - PhotoSwipe Opening Images In A New Tab

Question

I have a Razor app where Lightbox2 was previously used for image galleries in the app. Now, I want to make a change to use PhotoSwipe instead. I started off by following the documentation on the official site: https://photoswipe.com/getting-started/. My issue is that when I click on any thumbnail, the full image is opened in a new tab instead of opening the image in the gallery component of PhotoSwipe. The documentation seemed like a pretty straightforward setup, but in this case I am not sure what else I am missing. Thanks in advance for all your help.

PhotoSwipe initialization (init-photoswipe.js):

import PhotoSwipeLightbox from '../photoswipe-dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery--custom-html-markup',
    children: 'a',
    pswpModule: () => import('../photoswipe-dist/photoswipe.esm.js')
});
lightbox.init();

Code snippet of Razor component:

<ContentTemplate>
        @if (IsLoading)
        {
            <PlaceholderLoading />
        }
        else
        {
            <div class="card-body pb-1">
                <h5 class="card-title pr-2">
                    @(Observation.Question ?? Observation.Name)
                </h5>
            </div>

            @if (ThumbnailUrl is PhotoNotTaken or ImageCannotBeDisplayed)
            {
                <img class="card-img-bottom" src="@ThumbnailUrl" alt="No photo available" />
            }
            else
            {
                <div class="pswp-gallery" id="gallery--custom-html-markup">
                    <a href="@PhotoUrl" data-pswp-width="1669" data-pswp-height="2500" target="_blank">
                        <img class="card-img-bottom" src="@ThumbnailUrl" alt="@(Observation.Question ?? Observation.Name)" />
                    </a>
                </div>
            }
        }
    </ContentTemplate>

Snippet of _Host.cshtml file:

<!-- PhotoSwipe CSS -->
    <link rel="stylesheet" href="~/_content/ProjectComponents/js/photoswipe-dist/photoswipe.css">
<!-- PhotoSwipe initialization -->
    <script src="~/_content/ProjectComponents/js/custom/init-photoswipe.js" type="module"></script>

Note: The _Host.cshtml file is in a separate project for the actual website. The PhotoSwipe initialization and Razor component code are in another project for Shared Components. Both projects are part of the same solution, so not sure if this will cause some issues with PhotoSwipe.

You are setting the href to your photo URL, which will open the direct link — gen, Apr 27 '22 at 13:58
@gen I did that because the code examples in the PhotoSwipe docs also set an href — MERNboy, Apr 27 '22 at 14:28

score 0 · Answer 1 · answered Jan 18 '23 at 00:12

I run into the same issue; it appears to be the dynamic content isn't picked up when lightbox.init() first initialized; to get that worked around we need to assign the lightbox initialization function to a global object something like following (note the window.MyJS object):

 import PhotoSwipeLightbox from '/libs/photoswipe/photoswipe-lightbox.esm.min.js';
        const lightbox = new PhotoSwipeLightbox({
            gallery: '#gallery--custom-html-markup',
            children: 'a',
            pswpModule: () => import('/libs/photoswipe/photoswipe.esm.min.js')
        });
        

        window.MyJS = {
            initializeGallery: function () {                
                lightbox.init();
            }
        }

Later inside of the gallery component we should do the following:

@inject IJSRuntime JS

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await IJS.InvokeVoidAsync("MyJS.initializeGallery");
        }
    }

Hope that helps

Razor App - PhotoSwipe Opening Images In A New Tab

1 Answers1