The datalist control displays the effect of an image.

A few days ago, insus. Net wrote a blog post showing directory pictures: http://www.cnblogs.com/insus/archive/2013/05/16/3081055.html just let you know that the gridview controls display pictures, the use of user controls and interface applications that are often mentioned in the development process. When the source image is displayed, Ajax technology seems to have some limitations.

If you want to display a lot of images on your website or a website with images as the main type, you can use the gridveiw control to display them, which makes it quite inadequate. This time, insus. net uses another control datalist to display and implement the final effect step by step.

For program development, we cannot achieve the most basic and expected results in one step. We need to reconstruct, optimize, and supplement the functions.

Create a directory imagelib in the site to store images. This article will be omitted for the function of uploading images or for user management. Insus. NET is lazy. Use the image used in the previous article, but download a few more images, which are related to the solar system. Perhaps influenced by his younger son, he has learned a lot about space in the near future.

On the site, create An ASPX webpage, such as default. aspx, and pull a datalist control from toolbox in the webpage. For example:

, #0 position code, is an image control ASP: image, it will be used to display images. Set borderstyle to 0.
# Position 1 code is also a link control that allows users to click an image and open another window to display the source image.
#2. Because images are obtained from the site directory, a directory contains many images. In the #1 image control, you need to bind the image path or data stream to the event.

Okay, we are going to. aspx. CS to bind data to this datalist control.
Before doing this, you need to think of a problem, that is, some files in the site directory may not be real image files. When the directory is open for users to upload, users can upload images instead of images. Therefore, you need to write a function to check whether the file is an image file. This method is already in the insus. Net blog: The http://www.cnblogs.com/insus/archive/2012/03/08/2385054.html was only available at the time of the VB. NET version. For some netizens who specialize in C #, the C # version code is posted here:

In. CS, write a method,

private void Data_Binding(){}

It is used to bind data. We cannot bind all the data code to the page_load event. From the refactoring perspective, we should extract the code and put it in a separate method. In this way, when other methods are executed and data needs to be re-bound, only this method can be executed.

Code 11th is to write a page-level variable, that is, to specify the image directory. Of course, in your environment, this may not be written like this, but the directory path that you pass from other pages or the path obtained from the database, or the path directory to which the user belongs.

This variable is obtained at two locations when the following data is bound. Lines 21 and 26 of code are highlighted by yellow.
The pink highlighted part function of the 26th-line code is the function of checking whether the file you just wrote is an image.
Then, put the image files in the generic list <fileinfo> set.
Lines 32 and 33 are finally bound to the datalist control.

In the page_load event method:

At this point, I believe the program can run, but the picture is not displayed, because

OnItemDataBound="DataListGalleryList_ItemDataBound"

The event has not been written, and the image is imageurl implemented in this event.

Write it now. Wait. Because you also need to prepare a program for processing thumbnails and displaying the original image.
Just copy it. the first link of the blog post is http://www.cnblogs.com/insus/archive/2013/05/16/3081055.html.
No, insus. Net doesn't want to use that method, because the image is not scaled proportionally, and some thumbnails have been deformed. If you want to control the thumbnail of an image, you have to consider the scaling factor for the image or specify the width or height. With these conditions, you can compare the original size of the image. The specific program insus. NET is also forgotten, because the scaling program used in the insus. Net project has been encapsulated as a DLL class library. But here, insus. Net does not want netizens to use encapsulated components, so it is still a reference for the source program. Go to the insus. Net blog and find out what we should do.

1. http://www.cnblogs.com/insus/articles/1909037.html

2. http://www.cnblogs.com/insus/archive/2011/05/28/2060601.html

3. http://www.cnblogs.com/insus/archive/2011/04/02/2003740.html

This blog post shows the images in the directory, so choose insus. netYiMethod to scale down the display. Of course, you should take into consideration in program development. When uploading images, users must upload images and produce a thumbnail at the same time. In this way, the efficiency will be better. No matter the thumbnail or the source image is displayed, the images in the directory are displayed without processing.

OK. Now we can complete the datalistgallerylist_itemdatabound () event of the datalist control:

#0 determine whether the data row is alternatingitem and item. If it is not directly skipped.
#1 first determine whether the hyperlink1 and image1 controls are empty. If not, find the two controls. The thumbnail and source image links are displayed for them.
#2 bind the imageurl to the image1 control. The directed page is thumbnail. aspx with a parameter of thum. Note that httputility. urlencode is used to solve the problem of path or file name in Chinese or other character sets.
#3 bind navigateurl to hyerlink1.

Preview:

Well, it's basically done, but the effect is not the best. Go to this web site to learn about: http://lokeshdhakar.com/projects/lightbox2/ to download it and unzip it. Then copy the selected file to the site, and keep the original file directory name

Reference JS and CSS to The. aspx webpage.

 
Itemtemplate code in the datalist control:

Note that the ref attributes are written differently and the results are different. Without "[?] ", The user clicks the link to display only a single image, and vice versa, it can be played continuously. The internal parameter characters are only used to make them unique on the page.

The front-end page. aspx has been modified, and the natural backend. aspx. CS should also be modified accordingly. The highlighted part is the added and changed code:

You can't wait to see the modified effect. The animation is compressed, and the effect is still a little disappointing. If you want to see the real effect, do it yourself.

To be honest, there are several. ashx codes that are not posted above. If you want to use the whole DEMO code, you can download them from the address below. If you want to run it directly, you need:

Http://download.cnblogs.com/insus/ASPDOTNET/DataList_lightbox2_demo.rar

Postscript:

The lightbox mentioned aboveThe relevant Code, although open-source, is copyrighted by the original company or the author.