загрузить галерею изображений с помощью fancybox3 через запрос AJAX

Question

У меня есть ASP. NET MVC 4 веб-страница с галереей изображений. Я пытаюсь заставить «большое изображение» загружаться асинхронно с помощью вызова AJAX, поскольку загрузка страницы займет слишком много времени, если бы я загружал свои большие изображения заранее.

Вот что я имею в мой взгляд:

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

...

Вот JsonResult в моем контроллере:

[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);
}

Я следую шаблону fancybox3 для загрузки контента через AJAX - вставлено ниже:

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

Я установил точку останова на метод JsonResult в моем контроллере, и курсор никогда не входит в него, поэтому я пытаюсь что-то сделать неправильно, пытаясь вызвать метод. Кто-нибудь видит мою ошибку? Я не понимаю, как адаптировать пример кода data-src="my_page.com/path/to/ajax/" к моему существующему коду. Кажется, мне не нравится мой javascript вызов функции: data-src="getLargeImage(@item.ID, @Model.Image.Type);" Что мне делать по-другому?

Answer 1

Для загрузки большого изображения по запросу вам не нужно использовать ajax. Имея такие теги:

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

Fancybox отправляет запрос на URL большого изображения после того, как вы нажмете на маленькое изображение.

Вам просто нужно установить его:

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

Пример

В следующем примере показан минимальный пример загрузки большого изображения по запросу , В этом примере предполагается, что вы считываете изображения со следующих URL:

• Large: /gallery/getlargeimage/{id} - сервер обрабатывает, как загружать изображения
• Small: /gallery/getsmallimage/{id} - сервер обрабатывает, как загрузка изображений

Если вы открываете прямую ссылку на изображения, вам даже не нужны действия для обработки маленьких и больших изображений. Этот пример предназначен только для изучения, чтобы показать, как можно вернуть изображение из действия.

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.cs html

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

Действия публикации в MVC получают свои аргументы из тела сообщения, а не из URI. Итак, вам придется сделать что-то вроде этого:

    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;
            }
        });
    }