.net Razor应用程序- PhotoSwipe在新选项卡中打开图像

nc1teljy  于 2023-01-18  发布在  .NET
关注(0)|答案(1)|浏览(124)

我有一个Razor应用程序,其中Lightbox 2以前用于应用程序中的图片库。现在,我想做一个改变,使用PhotoSwipe代替。我开始按照官方网站上的文档:https://photoswipe.com/getting-started/。我的问题是,当我点击任何缩略图时,完整的图像都会在一个新的标签页中打开,而不是在PhotoSwipe的图库组件中打开图像。文档看起来是一个相当简单的设置,但在这种情况下,我不确定我还错过了什么。提前感谢您的帮助。
照片滑动初始化(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();

Razor组件代码片段:

<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>

_Host.cshtml文件的代码段:

<!-- 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>

注意:_Host.cshtml文件在实际网站的单独项目中。PhotoSwipe初始化和Razor组件代码在共享组件的另一个项目中。这两个项目是同一解决方案的一部分,因此不确定这是否会导致PhotoSwipe出现一些问题。

1l5u6lss

1l5u6lss1#

我遇到了同样的问题;lightbox.init()第一次初始化时似乎没有拾取动态内容;为了解决这个问题,我们需要将lightbox初始化函数分配给一个全局对象,如下所示(注意window.MyJS对象):

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();
            }
        }

稍后在gallery组件中,我们应该执行以下操作:

@inject IJSRuntime JS

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

希望能有所帮助

相关问题