In the mvc application, a method is implemented to get the image stored in the database.

C #

public FileContentResult GetImage(int id, string ch) { var image = _imagesRepository.GetEnumerable.FirstOrDefault(g => g.Id == id); if (image != null) { return File(image.ImageData, image.ImageMimeType); } else { return null; } }

In the view, you must show the image and pass it to fancyBox if you click on it.

To display the image, use Url.Action ()

HTML

 @foreach (var image in item.Images) { <div class="gal"> <a class="fancybox" rel="group" href='@Url.Action("GetImage", new{id = image.Id})' style="width: 100px; height: 100px;"><img src='@Url.Action("GetImage", new{id = image.Id})' width="250px;" height="250px;" alt="" /></a> </div> }

Javascript

 <script type="text/javascript"> $(document).ready(function () { $(".fancybox").fancybox(); });

However, when you click on an image, fancyBox gets a line to call the image acquisition method and an error occurs in the browser.

Uncaught Error: Syntax error, unrecognized expression: / Shop / GetImage? Id = 3

Tell me, please, is it possible in this case to work with images obtained from the database? thank

    1 answer 1

    A solution to the problem was proposed here . In my case, the change in the JS function helped

    Javascript

     $(".fancybox").fancybox({ type: "iframe" });