Question

I have uploaded some images using uploadify and saving the original file in “uploads” folder and thumbnails in “uploads\thumbs” folder now what I need is I have a div element on the main.aspx page where I need to show thumbnail image.After clicking the thumbnail I need to give a lightbox effect to it.

1.I have done this way but this is showing me the original image instead of thumbnail.So how do I point to my thumbnail.

2.When Using Lightbox effect how do I manage my two Imagess with the below code.

This is my Handler code:

Public Class UploadVB : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

        Dim savepath As String = ""
        Dim tempPath As String = ""
        tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
        savepath = context.Server.MapPath(tempPath)
        Dim filename As String = postedFile.FileName
        If Not Directory.Exists(savepath) Then
            Directory.CreateDirectory(savepath)
        End If
        If Not Directory.Exists(savepath + "\thumbs") Then
            Directory.CreateDirectory(savepath +"\thumbs")
        End If


        postedFile.SaveAs((savepath & "\") + filename)
        Dim fullImage As System.Drawing.Image = New System.Drawing.Bitmap((savepath & "\") + filename)

        Dim newWidth As Integer = 200
        Dim newHeight As Integer = 200

        Dim temp As New Bitmap(newWidth, newHeight)
        Dim newImage As Graphics = Graphics.FromImage(temp)
        newImage.DrawImage(fullImage, 0, 0, newWidth, newHeight)
        temp.Save((savepath +"\thumbs"  & "\") + "t_" + filename)

        context.Response.Write((tempPath & "/") + filename)
        context.Response.StatusCode = 200



    End Sub

Here is my java script code:

<script type="text/javascript">
$(window).load(
function () {
    $("#Inputfile").fileUpload({
        'uploader': 'scripts/uploader.swf',
        'cancelImg': 'images/cancel.png',
        'buttonText': 'Browse Files',
        'script': 'UploadVB.ashx',
        'folder': 'uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'queueSizeLimit':9999,
        'simUploadLimit': 2,
        'sizeLimit': 4000000,
        'multi': true,
        'auto': true,
        'onComplete': function (event, queueID, fileObj, response, data) {
            $("#Original").append('<img src="' + response + '"/>')

        },

        'onError': function (event, ID, fileObj, errorObj) {
            alert(errorObj.type + ' Error: ' + errorObj.info);
        }


    });
}
);

Here is what I need to show the Images:

<div id="Original">

</div>

Answer 1

In this line

context.Response.Write((tempPath & "/") + filename)

you are referring to the main folder try something like:

context.Response.Write((tempPath & "/thumbs/") + filename)

As far as the light box effect, you can use some jQuery Plugin like jQuery Lightbox

You can also create image tag in your handler and send it in response, if the plugin needs the path of both files. Then you can append the complete response to “Original” div.

Edit:

Instead of writing:

context.Response.Write((tempPath & "/thumbs/") + filename)

You can write:

context.Response.Write("<a href='"+(tempPath & "/") + filename+"'><img src='"+(tempPath & "/thumbs/") + filename +"'/></a>")

and in your script:

$("#Original").append(response)

It will link your thumbnail to your image. Finally, You’ll need to use Lightbox plugin can call its method

$("#Original a").lightBox({fixedNavigation:true});

which will create the lightbox effect.