Click a small image to display the big image effect based on the jQuery plug-in.

Click a small image to display the big image effect based on the jQuery plug-in.

The example in this article shows you how to click a small Graph Based on jQuery to display the large image. The details are as follows:

Show the followingEffect:

Click any image to display a large image.:

1. Front-End Interface

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx. cs" Inherits = "exercise. WebForm1" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. Background code

Using System; using System. collections. generic; using System. linq; using System. web; using System. web. UI; using System. web. UI. webControls; using System. data. sqlClient; using System. data; using System. text; namespace exercise {public partial class WebForm1: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (! IsPostBack) {LoadData () ;}} private void LoadData () {string constr = "data source = LOVE-PC \ SQLEXPRESSPC; initial catalog = BoKe; user id = sa; password = admin "; using (SqlConnection conn = new SqlConnection (constr) {using (SqlCommand cmd = conn. createCommand () {conn. open (); cmd. commandText = "select BigImgUrl, SmallImgUrl from T_Photo"; SqlDataAdapter adapter = new SqlDataAdapter (cmd); DataTable dt = new DataTable (); adapter. fill (dt); StringBuilder sb = new StringBuilder (); sb. append ("<ul>"); for (int I = 0; I <dt. rows. count; I ++) {sb. append ("<a href =" + dt. rows [I] ["BigImgUrl"] + ">"); // Add the image path sb. append ("<li>"); sb. append ("
The above is all the content of this article, hoping to help you learn.