Partial page return with MVC

Question

I am pretty new to MVC and hope that I am approaching this the correct way. Any input or advice would be great.

I would like to have a thumbnail view of an image load normally and when a user clicks on the image, the dynamic picture loads using the colorbox jquery plugin.

The problem is when you click on the smaller image, the dynamic image becomes the entire page. I realize its because of where the href is pointing to, but I need some pointers as to a correct way to accomplish this.

 <div id="gallery">

    <% For Each item In Model%>

    <ul>
        <li>
            <a href="<%=Url.Action("CreateWM", "Image", New With {.id = item.ImageID })%>" title="Please work" rel="Test">
                <img src="<%=Url.Action("Create", "Image", New With {.id = item.ImageID })%>" width="300" height="300" alt="Woot" />
            </a>
        </li>
    </ul>

    <% Next%>

</div>

In case someone needs it, this is the ImageController. The ImageActionResult is taking the memory stream and returning the image

Public Class ImageController
   Inherits System.Web.Mvc.Controller

    Public Function CreateWM(ByVal id As String) As ImageActionResult

        Using db As New DataClasses1DataContext
            Dim ms As New MemoryStream(db.MyImages.Single(Function(x) x.ImageID = id).ImageData.ToArray())
            Return New ImageActionResult(ms, "hey.jpg", True)
        End Using

    End Function

    Public Function Create(ByVal id As String) As ImageActionResult

        Using db As New DataClasses1DataContext
            Dim ms As New MemoryStream(db.MyImages.Single(Function(x) x.ImageID = id).ImageData.ToArray())
            Return New ImageActionResult(ms, "hey.jpg", False)
        End Using

    End Function

End Class

Thanks

Answer 1

You need to manipulate the URL of the image element using client side javascript, something like:

<a href="#" onclick="$('#myImg')[0].src='<%=Url.Action("CreateWM", "Image", New With {.id = item.ImageID })%>'" title="Please work" rel="Test">
     <img id="myImg" src="<%=Url.Action("Create", "Image", New With {.id = item.ImageID })%>" width="300" height="300" alt="Woot" />
</a>

Answer 2

With the ColorBox plugin that you are using, you can specify the width/height of the dynamic image:

$('a.dynamicImage').colorbox({width: 75%, height: 75%});