2sxc | Bluimp Gallery App

Question

我想使用图像标题（截屏下方的元数据值）自动显示每个图像下方的每个图像标题。另外，出于辅助功能的目的，默认情况下自动将此元值指定为'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>

另请注意，当我点击元数据标签时，会弹出以下错误消息：

注意：版本：9.2.0

更新 将“图像元数据”更改为“ImageMetadata”可以解决这个问题。

在为每张图片添加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>

Answer 1

所以你要同时问几件事。

编号1：使用您想要检查图像是否具有元数据的标题，如果是，则使用该标题。这段代码应该有用（pic是循环中的图像变量）：

@(pic => !pic.HasMetadata ? "" : ((dynamic)pic.Metadata).Title)

数字2似乎是配置中的问题。据我所见，默认工具栏中的元数据按钮有效。我检查了内部和字段配置是错误的 - 您应该从＆＃34;图像元数据＆＃34;到＆＃34; ImageMetadata＆＃34;