Question

This question will be a little longer and I am sorry for that 🙂
I search for the best solution for a few days to make image gallery in asp mvc and JQuery.
The main issue is displaying image when user click on thumb.
I want to make whole browser view black and image in the center (width/height 100%).
I have made something and it works. But have a few issues that I didn’t make to fix.
Here how I did it:
I have ImagesController and Index view, that view contains image thumbs. ImageID I store in name attribute of image tag. When user click on thumb image I call this jquery function:

$('.imageThumb').live('click', function (e) {
    e.preventDefault();

    $.ajax({ type: "POST",
        url: '@Url.Content("~/Images/Show")',
        data: "imgId=" + $(this)[0].name,
        success: function (d) {
            $(document.body).append(d);
            $(document.body).css("overflow", "hidden");
        }
    })
});

This Show view is the fullscreen browser view that display selected image:

<div id="bigWrap" style="background: #000; position: fixed; top: 0; left: 0; width: 100%;
    height: 100%;">
    <div id="leftPage" style="width: 100%; height: 100%; background: #000; float: left;
        text-align: center; position: relative;">
        <img id="imgDis" src="@Url.Content("~/" + Model.Path)" alt="@Model.MediaId" 
        style=" max-width: 90%;
                max-height: 90%;  "  />
        <div style="position: absolute; top: 1%; right: 0px;">
            <input id="closeImage" type="image" src="btnClose.png"
                onclick="$('#bigWrap').remove(); $('body').css('overflow', 'auto');" />
        </div>     
            <div style="position: absolute; top: 45%; right: 0px;">
            @using (Html.BeginForm("Next", "Images", FormMethod.Post, new { id = "nextImage" }))
            {    
                @Html.HiddenFor(a => a.MediaId);
                @Html.HiddenFor(a => a.Path);
                <input id="btnNext" type="image" src="btnNext.png" />
            }
        </div>
    </div>
</div>

When user click on next button I call:

$(function () {
    $('#nextImage').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: "m_id=" + $('#imgDis').attr('alt'),
            beforeSend: function (xhr) {
                $('#bigWrap').empty();
            },
            success: function (result) {
                $('#bigWrap').prepend(result);
            }
        });
        return false;
    });
});

Next ActionMethod returns the same Show view just with new model (image):

    [HttpPost]
            public ActionResult Next(int m_id)
    ...

return View("Show", model);

Now, the issues I have with this approach is:

1. When user click on thumb image is displayed but URL stays: http://localhost:xxxx/Images
2. When click on next button URL is still the same.
3. This only works when I am in Images/Index. If I
   open the image from some other view

With same function (from jquery call Show action) Url changes like http://localhost:xxxx/Images/Show?imgId=47, next button still changes nothing and when I close displayed view I got empty page in browser.

So what I made here obviously works when user watch images from index page and if user is not interested in url. But I want to change this but I am stuck here. So any idea what to do, what to fix or change everything is welcome.

Thanks

Answer 1

I agree. Why should you invent the wheel again? There are plenty of good plugins out there. My favorite is of course Fancybox. It has a nice UI … check these demos. I would dare to say, it’s the most downloaded lightbox/modal box out there.

There are also good examples of different scenarios, like loading images from AJAX, change the background color, etc.