0

So I am trying to display a group of images inside of a modal when you click on the thumb image. I am using the w3-css stylesheet to create the modal. Basically when I display the page all of the thumbs work fine. However, when I click on it, the thumb displays fine but the rest of the images come from the first item. None of the other items with other images get displayed. I will put code snippets in and leave a link to the current page so you can see what I am talking about if it is hard to understand.

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

I feel like this is an easy fix but I just can't seem to find it.

here is a link to the page

Dtb49
  • 1,211
  • 2
  • 19
  • 48
  • Have you checked the html output? Is this a serverside problem or a clientside problem? – Mark Mar 14 '17 at 14:09
  • 1
    I sorta solved the problem, basically the for loop wasn't working exactly so I broke it down into a bunch of if statements and fixed it that way. I know that is a terrible way to do things but, it works now. – Dtb49 Mar 14 '17 at 14:15

0 Answers0