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」工作thx。

仍然無法將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號似乎是在配置的問題。就我所見，默認工具欄中的元數據按鈕可以工作。我檢查了內部和場配置是錯誤的 - 你應該從「圖像元數據」到「ImageMetadata」