load image gallery using fancybox3 via AJAX request

Question

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.

Here's what I have in my view:

@{
    string srcMain = "";
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript">

    function getLargeImage(imageID, imageType) {

        $.ajax({
            url: "/Explore/GetLargeImage?i=" + imageID + "&objectType=" + imageType,
            type: "POST",
            dataType: "json",
            success: function (data) {
                return data;
            }
        })
    }

</script>


...

foreach (var item in Model.Image.ExhibitionImages)
{
    <div class="tile-outer">
        <div class="tile-inner">
            @if (item.Image_MimeType_MediumPad != null)
            {
                srcMain = "data:" + item.Image_MimeType_MediumPad + ";base64," + @Html.Raw(Convert.ToBase64String(item.Image_Data_MediumPad));

                <a data-fancybox="gallery" data-type="ajax" data-src="getLargeImage(@item.ID, @Model.Image.Type);" href="javascript:;">
                    <img src="@srcMain" id="@anchorID" class="tile-image" alt="Image" />
                </a>
            }
        </div>
    </div>
}

...

Here is the JsonResult in my controller:

[HttpPost]
public JsonResult GetLargeImage(int i, int objectType)
{
    var imageResult = LoadSP_ImageLarge("sp_ImageLarge", i, objectType);
    List<ImageLarge> list_ImageLarge = new List<ImageLarge>();
    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);
}

I am following the fancybox3 template for loading content via AJAX - pasted below:

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
    AJAX content
</a>

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 data-src="my_page.com/path/to/ajax/" to my existing code. It seems to not like my javascript function call: data-src="getLargeImage(@item.ID, @Model.Image.Type);" What should I be doing differently?

Answer 1

To load the large image on-demand, you don't need to use ajax. Having tags like this:

<a id="id" href="Large Image Url"><img src="Small Image Url"/></a> 

Fancybox send the request to Large Image Url after you clicked on the small image.

You just need set it up:

$(document).ready(function () {
    $("#id").fancybox({ type: 'image' });
});

Example

The following example shows a minimal example that loads the large image on-demand. The example assumes you read images from the following urls:

• Large: /gallery/getlargeimage/{id} - The server handles how to load images
• Small: /gallery/getsmallimage/{id} - The server handles how to load images

If you expose direct link to the images, you even don't need need actions to handle small and large images. The example is just for learning purpose to show how you can return an image from an action.

GalleryController

public class GalleryController: Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetLargeImage(int id)
    {
        //Load the large image from filesystem or database 
        var file = Server.MapPath($@"/Images/Large/{id}.jpg");
        return File(file, @"image/jpeg");
    }
    public ActionResult GetSmallImage(int id)
    {
        //Load the large image from filesystem or database 
        var file = Server.MapPath($@"/Images/Small/{id}.jpg");
        return File(file, @"image/jpeg");
    }
}

Index.cshtml

@{Layout = null;}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Gallery</title>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" 
        src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" 
        href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("a#example1").fancybox({ type: 'image' });
        });
    </script>
</head>
<body>
    <div>
        <a id="example1" href="/gallery/getlargeimage/1">
            <img alt="example1" src="/gallery/getsmallimage/1" />
        </a>
    </div>
</body>
</html>

Answer 2

Post Actions in MVC get their arguments from the message body, not the URI. So, you would have to do something like this:

    function getLargeImage(imageID, imageType) {
        $.ajax({
            url: "@Url.Action("GetLargeImage", "Explore")",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({ i: imageID, objectType: imageType }),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                return data;
            }
        });
    }