javascript - Show large image when click on small image -
I am trying to show a larger image when I click on a smaller image, I have an SQL table in which I store the image I then display it to the image in IGM control, but now when the user clicks on this image, it will open in a big size popup.
My code is to recover the image in the IIG control and display it in IMG control
& lt; Script type = "text / javascript" & gt; $ ('# Image1Large') Hide (). Click (function () {$ (this) .hide ();}); $ ('# Image1'). Click (function () {$ ('# image1Large'). Attr ('src', this.src) .show () .offset ({top: 0, left: 0});}); & Lt; / Script & gt; & Lt; Img runat = "server" id = "image1" alt = "src" = "" height = "100" width = "100" /> & Lt; Img runat = "server" id = "image1 large" alt = "" /> Protected Zero Load Image 1 () {SqlCommand CMD = New SqlCommand ("sps_getimage", con); Cmd.CommandType = CommandType.StoredProcedure; Cmd.Parameters.AddWithValue ("@ flag", 1); Cmd.Parameters.AddWithValue ("@ ad_id", ad_id); Con.Open (); SqlDataReader Reader = cmd.ExecuteReader (System.Data.CommandBehavior.SequentialAccess); If (reader.HasRows) {reader.Read (); MemoryStream Memory = New MemoryStream (); Long beginningindexx = 0; Const int chancisy = 256; While (true) {byte [buffer = new byte [chunky]]; Long-retrieved bytes = Reader Getbytes (0, StartIndex, Buffer, 0, Chunky's); Memory. Write (buffer, 0, (integer were retrieved); StartIndex + = Recovered Bytes; If (reclaimed BWIT! = Chunk Seas) break; } Byte [] data = memory Toure (); Img1 = data; Memory.Dispose (); Image1.Src = "Data: Image / PNG; Base 64," + Convert. ToBase64String (Data); } Con.Close (); } It is not actually a C # or SQL problem, but rather client side. Since you have already retrieved the image and resized it only through the height = "100" width = "100" attributes, whatever you have to do, To display in size, there are several ways to do this, here's a basic one: Add another image element to keep a larger image:
& lt; Img runat = "server" id = "image1" alt = "src =" "height =" 100 "width =" 100 "/> & Lt; Img runat = "server" id = "image1Large" /> And add this code to hide the big image initially and show it on click:
$ ('# image1Large'). Hide (). (Function () {$ (this) .hide ();}) $ ('# image1') Click (function () ($ ('# image1Large'). Attr ('src', this.src) .show () .offet ({top: 0, left: 0});}) < / Pre> Here's a demo: In real life scenario, you'll need to adjust it (perhaps additional formatting and positioning of bigger image, maybe it's a div Container etc.) but this is the idea.
Comments
Post a Comment