title: load image gallery using fancybox3 via AJAX request
body: <p>I have an ASP.NET MVC 4 web page with an image gallery. I am trying to get the "large image" to load asynchronously with an AJAX call, since the page would take too long to load if I were to load my large images upfront.</p>
  
  <p>Here's what I have in my view:</p>
  
  <pre><code>@{
      string srcMain = "";
  }
  
  &lt;script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /&gt;
  &lt;script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function getLargeImage(imageID, imageType) {
  
          $.ajax({
              url: "/Explore/GetLargeImage?i=" + imageID + "&amp;objectType=" + imageType,
              type: "POST",
              dataType: "json",
              success: function (data) {
                  return data;
              }
          })
      }
  
  &lt;/script&gt;
  
  
  ...
  
  foreach (var item in Model.Image.ExhibitionImages)
  {
      &lt;div class="tile-outer"&gt;
          &lt;div class="tile-inner"&gt;
              @if (item.Image_MimeType_MediumPad != null)
              {
                  srcMain = "data:" + item.Image_MimeType_MediumPad + ";base64," + @Html.Raw(Convert.ToBase64String(item.Image_Data_MediumPad));
  
                  &lt;a data-fancybox="gallery" data-type="ajax" data-src="getLargeImage(@item.ID, @Model.Image.Type);" href="javascript:;"&gt;
                      &lt;img src="@srcMain" id="@anchorID" class="tile-image" alt="Image" /&gt;
                  &lt;/a&gt;
              }
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  ...
  </code></pre>
  
  <p>Here is the JsonResult in my controller:</p>
  
  <pre><code>[HttpPost]
  public JsonResult GetLargeImage(int i, int objectType)
  {
      var imageResult = LoadSP_ImageLarge("sp_ImageLarge", i, objectType);
      List&lt;ImageLarge&gt; list_ImageLarge = new List&lt;ImageLarge&gt;();
      foreach (var row in imageResult)
      {
          list_ImageLarge.Add(new ImageLarge
          {
              Image_Data_string = (row.Image_Data != null) ? string.Format("data:" + row.Image_MimeType + ";base64,{0}", Convert.ToBase64String(row.Image_Data)) : null
          });
      }
      string imageString = list_ImageLarge.FirstOrDefault().Image_Data_string;
  
      return Json(imageString, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>I am following the fancybox3 template for <a href="https://fancyapps.com/fancybox/3/docs/#ajax" rel="nofollow noreferrer">loading content via AJAX</a> - pasted below:</p>
  
  <pre><code>&lt;a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"&gt;
      AJAX content
  &lt;/a&gt;
  </code></pre>
  
  <p>I put a breakpoint on the JsonResult method in my controller, and the cursor never enters it, so I am doing something wrong in my effort to call the method. Does anyone see my mistake? I am confused about how to adapt the example code <code>data-src="my_page.com/path/to/ajax/"</code> to my existing code. It seems to not like my javascript function call: <code>data-src="getLargeImage(@item.ID, @Model.Image.Type);"</code> What should I be doing differently?</p>