How DedeCMS implements LightBox effect

How does DedeCMS achieve the LightBox effect?

There are many ways to display pictures on the website. Generally, you open an extra window or tab for the picture link in the browser and display it like visiting the URL. However, the experience of this method is poor. . After all, every time a visitor views a picture, another window needs to pop up to display it. In addition to occupying resources, it also reduces the correlation between the picture and the content, increases the number of user operations, and reduces the user's fatigue to a certain extent. experience.

Recommendation: "dedecms usage tutorial"

LightBox introduction

The emergence of the LightBox picture display effect has changed the traditional way of browsing pictures, extremely Dadi improves the user experience. The principle of LightBox is very simple: use jQuery to pop up a layer on top of the current page, and block (reduce the brightness) the non-pop-up layer parts, and then display the picture in the pop-up layer. The advantage of this method is that when viewing the picture, the page It will not refresh, nor will it jump to another window or tab. And there is also a function that has a great experience. When you click on the non-pop-up layer, the script will close the pop-up layer of LightBox.

LightBox also has many functions for displaying effects. For example, some simply To enlarge a picture, some provide the zoom function, and some provide the function of viewing the previous and next pictures...etc., but the basic implementation methods are similar.

Next, follow a few simple steps to add LightBox display effects to the images on the DreamWeaver CMS page.

Upload files and add code

First, download the source code of the LightBox plug-in. The source code includes an index.htm sample page and related JS and CSS files. Upload the entire lightbox directory except the index.htm file to the default template (Default) directory of DedeCMS, then copy the code shown below into the article_image.htm file in the default template (Default) directory, and place it in the

:

##The above part of the code is part of the index.htm file in the LightBox source code, it is just copied to DedeCMS When creating template files, pay attention to the calling path of the JS file.

After completing these two steps, you can implement the LightBox effect in the picture display module of DedeCMS. If you plan to also implement the LightBox effect in the article module or software download module of the DreamWeaver content management system, it is recommended to add the above code Add it to the head.htm file, so that you can ensure that all files that call head.htm will achieve the LightBox effect.

The above is the detailed content of How DedeCMS implements LightBox effect. For more information, please follow other related articles on the PHP Chinese website!