Shulou(Shulou.com)06/02 Report--

How does DedeCMS achieve LightBox effect? This problem may be often seen in our daily study or work. I hope you can gain a lot from this question. The following is the reference content that the editor brings to you, let's take a look at it!

How does DedeCMS achieve LightBox effect?

There are many ways to display pictures on the website, generally, it is to open an extra window or tab for the picture link in the browser, which is displayed like visiting the URL, but the experience in this way is poor. After all, visitors need another pop-up window every time they view the picture, which not only takes up resources, but also reduces the correlation between the picture and content, and increases the number of user operations. To some extent, it reduces the user experience.

LightBox introduction

The appearance of LightBox picture display effect has changed the traditional way of picture browsing and greatly improved the user's experience. The principle of LightBox is simple: jQuery pops up a layer on the current page, obscures (reduces the brightness) the part of the non-pop-up layer, and then displays the picture in the pop-up layer, the advantage of this way is that the page will not refresh when viewing the picture, let alone jump to another window or tab. And there is also a great experience. When you click on the part that is not the pop-up layer, the script will close the pop-up layer of LightBox.

There are many functions of LightBox image display, for example, some simply enlarge the picture, some provide zoom function, and some provide the function of viewing the previous picture and the latter picture. And so on, but the basic implementation is similar.

Next, add the LightBox display effect to the pictures on the dream weaving CMS page through a few simple steps.

Upload files and add code

First, download the source code for the LightBox plug-in, which 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, and copy the code shown below into the article_image.htm file under the default template (Default) directory, and put it in between:

The above part of the code is part of the index.htm file in the LightBox source code, just pay attention to the call path of the JS file when copying to the DedeCMS template file.

After the completion of these two steps, you can achieve the LightBox effect in the picture display module of DedeCMS. If you plan to achieve the LightBox effect in the article module or software download module of the dream content management system, it is recommended to add the above code to the head.htm file, so that you can ensure that all files that have called head.htm achieve the LightBox effect.

Thank you for reading! After reading the above, do you have a general idea of how DedeCMS implements the LightBox effect? I hope the content of the article will be helpful to all of you. If you want to know more about the relevant articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.