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

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -