Use the image and video presentation plug-in blueimp Gallery to transform the video image presentation of the website,

Use the image and video presentation plug-in blueimp Gallery to transform the video image presentation of the website,

In many cases, our website may display our product images, tutorial videos, and other content. Combined with a good image and video display plug-in, we can make our site more convenient to use, it is also cool. There are a lot of related processing plug-ins available for use on Github, some of which are still very effective. This article introduces how to use the image and video display plug-in blueimp Gallery to transform the video and image display of the website, and compare it with the effect of the previous version.

1. Introduction to the blueimp Gallery plug-in

Blueimp Gallery is a touch function, responsive and customizable image and video display plug-in that optimizes mobile and desktop browsers and supports sliding, mouse, and keyboard navigation operations, supports effects changing, slide display, full screen, and other content types.

The Github address of this plug-in is as follows.

The video display interface is as follows:

When we open it, we usually cannot see the content displayed in the image, and we can see the display of some videos. However, the function usage on the page is very detailed. We can download the code for testing, we can get the results we need.

The image's Gallery (slide) display method and video are consistent, but there is a play button in the middle of the video. If it is a slide display method of the image, the interface is shown as follows, we can see that the two are very similar. I heard that this control can also expand and display other document content, such as HTML and PDF, But I didn't perform a test.

You can also display a thumbnail side by side. When you click an image, you can zoom in and view the image in full screen, with the tip and button for switching between left and right.

From the perspective of the effect, we can understand that the plug-in effect is a very good plug-in, so we want to use it to better display the video and images on our website: Guangzhou aiqidi.

 

2. Use of blueimp Gallery

The use of this control is relatively simple, because the official website has also made an introduction, here is a brief description.

First, add the corresponding CSS style file at the beginning of the page header, as shown below.

<! -- Image video display --> <link rel = "stylesheet" href = "blueimp-Gallery/css/blueimp-gallery.min.css"> <link rel = "stylesheet" href = "blueimp-Gallery/css /blueimp-gallery-indicator.css "> <link rel =" stylesheet "href =" blueimp-Gallery/css/blueimp-gallery-video.css ">

The control needs to use Jquery. Therefore, you need to add a reference to JQuery in the appropriate position, as shown below.

    <script src="./content/js/jquery-1.8.3.min.js"></script>

Other JS files are usually placed at the end of the page to increase the page loading speed. Before that, we need to add the required content display code in the page body, as shown below.

<div id="blueimp-video-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">    <div class="slides"></div>    

Finally, we need to add relevant JS files at the end of the page, as shown below.
<! -- Image Display script --> <script src = "blueimp-Gallery/js/blueimp-helper.js"> </script> <script src = "blueimp-Gallery/js/blueimp-gallery.min.js"> </ script> <script src = "blueimp-Gallery/js/blueimp-gallery-fullscreen.js"> </script> <script src = "blueimp-Gallery/js/blueimp-gallery-indicator.js"> </script> <script src = "blueimp-Gallery/js/blueimp-gallery-video.js"> </script> <script src = "blueimp-Gallery/js/blueimp-gallery-vimeo.js"> </script> <script src = "blueimp -Gallery/js/blueimp-gallery-youtube.js "> </script> <script src =" blueimp-Gallery/js/jquery. blueimp-gallery.min.js> </script>
Then, load the content code in the Custom JS to bind them to the elements of the interface, as shown in the following JS Code.
<Script> blueimp. gallery ([{title: 'winform framework incremental development process', href: 'doc/Video/winformframework development process'. mp4 ', type: 'video/mp4', poster: 'blueimp-Gallery/Pictures/videobg.png '}, {title: 'Mixed frame image display and storage', href: 'doc/Video/mixed frame image display and storage .mp4 ', type: 'video/mp4', poster: 'blueimp-Gallery/Pictures/videobg.png '}, {title: 'incremental development process of hybrid framework', href: 'doc/video/mixed framework development process .mp4 ', type: 'video/mp4', poster: 'blueimp-Gallery/Pictures/videobg.png '}, {title: 'incremental development process for WebAPI access using a hybrid framework', href: 'doc/Video/mixed framework's webapiaccess development process .mp4 ', type: 'video/mp4', poster: 'blueimp-Gallery/Pictures/videobg.png '}], {container: '# blueimp-video-audio usel', carousel: true}); </script>
Here, Title indicates the content, Href indicates the video or image address, type indicates the media type, poster indicates the background image of the video, and if it is an image, poster needs to be changed to thumbnail, they are used in the same way.
 
3. blueimp Gallery
Because our company's website needs to display some product images and related tutorial videos, integrating this plug-in is a very good way to display. After integration, you can see the following interface effects,Effect reference address: http://www.iqidi.com/MixWinVideo.htm
This type of video is directly embedded in the page for playback. You can also use the full screen button to display the video in full screen. The effect is very good, as shown below.

We need to prepare a suitable background image for the video so that it can be better displayed, that is, an image background.
In addition, you can use LightBox to display some product images, as shown below.

By clicking any image, the entire image preview page is zoomed in to view the clear image. You can also navigate to other images by using the mouse, keyboard, or button, as shown below.

This display method is intuitive and simple, which is very good in general.
The original method shows the video screenshot description and compares it.
First, you need to add a link in the page, and then click Connect to bring up a dialog box to play the Bootstrap mode.


The Code is also relatively large. Although it can solve the problem of video playback, the effect is always poor, And the blueimp Gallery plug-in for image and video presentation is used for transformation.
Effect reference address: http://www.iqidi.com/MixWinVideo.htm
The above is how I improved the content using the image, video, and presentation plug-in blueimp Gallery. I hope to provide you with ideas and practices for reference. I also welcome technical exchanges.