Multi-purpose responsive jQuery video and image gallery plug-ins, jquery Gallery

Multi-purpose responsive jQuery video and image gallery plug-ins, jquery Gallery

Unite Gallery is a powerful, multi-purpose responsive video and image Gallery jQuery plug-in. It uses modular technology, which is easy to use and easy to customize. You can use CSS to change the skin of the gallery, or even customize the theme style. It also supports mobile touch and image scaling. It also has the following features:

• You can play videos and audio files in the gallery.
• Responsive-automatically adapts to any screen or container and automatically adjusts the proportion.
• You can use a separate CSS file to change the gallery skin.
• Multiple themes-the gallery provides multiple themes, each of which has its own characteristics.
• Supports image scaling-the large image in the gallery can be scaled.
• Provides various function buttons, which can also be used in mobile devices.
• The gallery can be controlled by the arrow keys on the keyboard.
• Rich configuration parameters.
• Powerful API support.

Download Online Preview source code

Usage

To use this image gallery, you must at least move it into the following file.

123456

<script type='text/javascript' src='js/jquery.min.js'></script><script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>  <link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' /> <script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script> <link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />

HTML Structure

This image gallery uses<div>An element is used as a package element and contains a group of images.

123456789

<div id="gallery" style="display:none;">  <img alt="Image 1 Title" src="thumbs/image1.jpg"    data-image="images/image1.jpg"    data-description="Image 1 Description">       <img alt="Image 2 Title" src="thumbs/image2.jpg"    data-image="images/image02.jpg"    data-description="Image 2 Description"></div>