Search code examples
javascripttwitter-bootstrap-3lightbox

Bootstrap ekkoLightbox showing weird characters

I've tried to implement this lightbox plugin for bootstrap: http://ashleydw.github.io/lightbox/

This is the html for a thumbnail link image

<a href="/img/21/1920" data-toggle="lightbox">
 <img align="right" src="/img/21/200">
</a>

The image is displayed and if I click it the modal window appears, the modal window does however not look quite right.

enter image description here

If i go directly to /img/21/1920 it is shown in the browser as it should, no problems, and I can also create an <img> tag with that src-url that shows up correctly.

So it seems this is something specific to that modal plugin. When inspecting the HTML of the poped modal this is what shows.. and to me it seems it's missing something, an <img> tag perhaps. But I cant find any settings or other info on what I am doing wrong..

enter image description here

So. What am I doing wrong that is causing this?

Edit to show code that returns the images

public ActionResult GetImageSmall(int Id, int MaxWidth = 550)
{
    var file = _Context.Files.Where(x => x.Id == Id).SingleOrDefault();//.Select(s => s.ImageFile).SingleOrDefault();

    if (file.IsImage == false)
        return null;

    if (file != null)
    {
        FileManager fm = new FileManager();
        var filePath = fm.GetRealPathOfFile(file.Path);

        if (System.IO.File.Exists(filePath))
        {
            ImageHandler ih = new ImageHandler();
            string tempPath = ih.GetTempImagePath(file.Id, file.Extension, filePath, MaxWidth, _Context);
            return File(tempPath, HelperMethods.GetMimeType(System.IO.Path.GetExtension(tempPath)));
        }
    }
    return null;
}

The code above gets the desired images path from the database, and resizes it do the wanted size in order to save bandwidth. I might have a 3k x 3k sized image, this will return it in a more managable size based on the url path variables. And as I wrote before the url can be used in <img> tags or browsed to directly without issue. The url for this method is /img/{Id}/{MaxWidth}/

Mimetypes are returned based on the original file extension, such as: 

{".jpe", "image/jpeg"},
{".jpeg", "image/jpeg"},
{".jpg", "image/jpeg"},
Solution

  • Setting the type paramater to image solved my issue.. Seems the lightbox plugin cannot figure out its an image if the urlpath does not contain an extension (even if correct mimetypes are being sent).

    <a href="/img/22/1920" data-toggle="lightbox" data-type="image">
<img src="/img/22/100">
</a>