Question

因此，当您单击拇指图像时，我试图在模态内显示一组图像。我正在使用w3-css样式表来创建模态。基本上当我显示页面时，所有的拇指都可以正常工作。但是，当我点击它时，拇指显示正常，但其余图像来自第一个项目。没有显示其他图像的其他项目。我将把代码片段放入并留下当前页面的链接，这样你就可以看到我在说什么，如果它很难理解。

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
  var selection = CurrentPage.Children;
  int index = 1;
  int count = selection.Count();

  foreach (var category in selection)
  {
var items = category.Children;

      @*Goes through the group of items*@
    @foreach (var item in items)
    {


            @*If there is an image thumbnail for the item then diisplay it*@
        @if (item.ThumbImage.Length > 1)
        {

            <div class="w3-display-container" style="height:100px;">
            <img src="@Umbraco.TypedMedia(item.ThumbImage).Url" onclick="onClick(this)" class="w3-hover-opacity w3-third w3-display-middle">
            </div>
                <div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">

                    <img class="w3-modal-content" id="img01" />

                    @if(item.Images.Length > 1)
                    {   
                    var imagesList = item.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);                        
                    var imagesCollection = Umbraco.TypedMedia(imagesList);

                    foreach (var imageItem in imagesCollection)
                    {     

                        <img class="w3-modal-content" id="img01" src="@imageItem.Url" />

                    }

                    }

              </div>
                            }

        @*<a href="@file.Url" target="_blank">Download brochure</a>
          <ul>
          <li><a href="@file.Url" target="_blank"><i class="fa fa-file-pdf-o"></i><br />@fileSize</a></li>
        </ul>*@
    </div>
   }
  </div>
  <div class="clear"></div>
</div>
      @*Go through the loop again*@
index++;
      @*If index is equal to count section off the category*@
if (index == count)
{ <hr /> }    
  }  
}

@{
<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  }

</script>}

我觉得这很容易解决，但我似乎无法找到它。

这是指向page

的链接

使用Umbraco无法正确显示图像

0 个答案: