CODEWITHSUNDEEP
jqueryasp.netvb.net
user676589
user676589

Reputation:

How to show thumbnail from a folder using javascript in asp.net

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>

Upvotes: 0

Views: 1715

Answers (2)

wasimbhalli
wasimbhalli

Reputation: 5242

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.

Upvotes: 1

szamil
szamil

Reputation: 684

Maybe you can make response like pathToFile;pathToThumb and with JavaScript split() you can put correct path in correct place.

EDIT

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

in this line you should add path to thumb, ie.

  context.Response.Write((tempPath & "/") + filename + ";" + savepath +"\thumbs"  & "\" + "t_" + filename);

then, when you get that in javascript you need to do:

var paths = response.split(";");

//   paths[0]; path to file
//   paths[1]; path to thumb

So these may be used with lightbox or anything else.

... sorry, I'm more c# than vb...

Upvotes: 0

Related Questions