2sxc | Bluimp画廊应用程序

我想使用图像标题（下面屏幕截图中的元数据值）自动显示为每个图像下面的每个图像标题。此外，出于可访问性目的，默认情况下是否自动将此元值指定为“alt=”“”值

当前模板代码：

<link rel="stylesheet" href="@App.Path/dist/lib/blueimp/css/blueimp-gallery.min.css" data-enableoptimizations="true" />
<script type="text/javascript" src="@App.Path/dist/lib/blueimp/js/blueimp-gallery.min.js" data-enableoptimizations="bottom"></script>
<link rel="stylesheet" href="@App.Path/dist/app/view.css" data-enableoptimizations="true" />

@if(@Dnn.User.IsSuperUser)
            {
            @Content.Toolbar
        } else {
            @Edit.Toolbar(Content, actions: "edit,add")
        }

<div id="blueimp-gallery-items-@Dnn.Module.ModuleID" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@pic.Url?w=@App.Settings.CarouselImageWidth&h=@App.Settings.CarouselImageHeight&mode=crop" title="@(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-@Dnn.Module.ModuleID">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>

@* this is the rotator element *@
<div id='blueimp-gallery-@Dnn.Module.ModuleID' class='blueimp-gallery blueimp-gallery-carousel' data-carousel='true' data-start-slideshow="true">
    <div class='slides'></div>
    <h3 class='title'></h3>
    <a class='prev'>‹</a>
    <a class='next'>›</a>
    <a class='play-pause'></a>
    <ol class='indicator'></ol>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // initialize the carousel gallery
        blueimp.Gallery($('[data-gallery="#blueimp-gallery-@Dnn.Module.ModuleID"]').get(), {
                container: '#blueimp-gallery-@Dnn.Module.ModuleID',
                carousel: true
            }
        );
    });
</script>

@如果（@Dnn.User.issupurer）
{
@工具条
}否则{
@编辑工具栏（内容、操作：“编辑、添加”）
}
@foreach（AsAdam中的var pic（内容，“图像”）.Files）
{
}
@*这是旋转器元件*@

注：版本：9.2.0

更新：
将“图像元数据”更改为“图像元数据”工作正常

在为每个图像添加alt标记时仍有问题。标题显示，但当我将alt设置为相同时，它不显示

<div id="blueimp-gallery-items-@Dnn.Module.ModuleID" style="display:none;">
    @foreach (var pic in AsAdam(Content, "Images").Files)
    {
        <a href="@pic.Url?w=@App.Settings.CarouselImageWidth&h=@App.Settings.CarouselImageHeight&mode=crop" title="@(((dynamic)pic.Metadata).Title)" alt="@(((dynamic)pic.Metadata).Title)" data-gallery="#blueimp-gallery-@Dnn.Module.ModuleID">
            @(((dynamic)pic.Metadata).Title)
        </a>
    }
</div>


@foreach（AsAdam中的var pic（内容，“图像”）.Files）
{
}
所以你同时问了一些问题

第一：要使用标题，您需要检查图像是否有元数据，如果有，请使用元数据。此代码应该有帮助（pic是循环中的图像变量）：

@（pic=>！pic.hasmatadata？”：（（动态）pic.Metadata.Title）

2号似乎是配置中的一个问题。在我看来，默认工具栏中的元数据按钮可以正常工作。我检查了内部，字段配置错误-您应该将其从“图像元数据”更改为“图像元数据”

注意：blueimp 3.2修复了它