View custom-templates.css
#custom-templates .empty-message {
padding: 5px 10px;
text-align: center;
}
View complex.html
<img src="IMG_4880-1280.jpg"
srcset="IMG_4880-0240.jpg 240w,
IMG_4880-0320.jpg 320w,
IMG_4880-0480.jpg 480w,
IMG_4880-0640.jpg 640w,
IMG_4880-0800.jpg 800w,
IMG_4880-0960.jpg 960w,
IMG_4880-1280.jpg 1280w,
IMG_4880-1600.jpg 1600w,
IMG_4880-1920.jpg 1920w,
View index.html
<img src="steve-0300.jpg"
srcset="steve-0100.jpg 100w,
steve-0150.jpg 150w,
steve-0200.jpg 200w,
steve-0300.jpg 300w"
sizes="(max-width: 767px) 100px, 150px" />
View 1 ImageController.cs
public FilePathResult Image(int id, int x, int y)
{
var image = db.Images.First(i => i.ID == id);
var newPath = image.GetFile(imagePath, new Size(x, y));
return File(newPath, "image/jpeg");
}
View photo.js
var x = screen.width * window.devicePixelRatio;
var y = screen.height * window.devicePixelRatio;
var url = '/image?id=' + id + '&x=' + x + '&y=' + y;
$('.lightbox').css('background-image', 'url("' + url + '")');