Fully Functional jQuery Image/Video Gallery Plugin - Unite Gallery
File Size: | 5.65 MB |
---|---|
Views Total: | 69647 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Unite Gallery is a jQuery plugin which enables you to embed your images and videos into a responsive, modular, skinnable, touch-enabled gallery interface with tons of customization options & APIs.
Basic Usage:
1. Load the jQuery unite gallery plugin's script after loading jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src='unitegallery/js/unitegallery.min.js'></script>
2. Load the jQuery unite gallery plugin's core stylesheet and a theme CSS in the head section of your web page.
<link href="unitegallery/css/unite-gallery.css" rel="stylesheet" > <script src="unitegallery/themes/default/ug-theme-default.js"></script> <link href="unitegallery/themes/default/ug-theme-default.css" rel="stylesheet">
3. Embed your images and videos into the gallery using data-*
attributes. The markup structure should be like this:
<div id="gallery" style="display:none;"> <img alt="Preview Image 1" src="images/thumbs/thumb1.jpg" data-image="images/big/image1.jpg" data-description="Preview Image 1 Description"> <img alt="Preview Image 2" src="images/thumbs/thumb2.jpg" data-image="images/big/image2.jpg" data-description="Preview Image 2 Description"> <img alt="Youtube Video" data-type="youtube" data-videoid="A3PDXmYoF5U" data-description="You can include youtube videos easily!"> <img alt="Preview Image 3" src="images/thumbs/thumb3.jpg" data-image="images/big/image3.jpg" data-description="Preview Image 3 Description"> <img alt="Vimeo Video" data-type="vimeo" src="http://i.vimeocdn.com/video/447294219_200x150.jpg" data-image="http://i.vimeocdn.com/video/447294219_640.jpg" data-videoid="73234449" data-description="This gallery can also play vimeo videos!"> <img alt="Preview Image 4" src="images/thumbs/thumb4.jpg" data-image="images/big/image4.jpg" data-description="Preview Image 4 Description"> <img alt="Html5 Video" src="images/thumbs/html5_video.png" data-type="html5video" data-image="http://video-js.zencoder.com/oceans-clip.png" data-videoogv="http://video-js.zencoder.com/oceans-clip.ogv" data-videowebm="http://video-js.zencoder.com/oceans-clip.webm" data-videomp4="http://video-js.zencoder.com/oceans-clip.mp4" data-description="This is html5 video demo played by mediaelement2 player"> <img alt="Preview Image 5" src="images/thumbs/thumb1.jpg" data-image="images/big/image1.jpg" data-description="Preview Image 5 Description"> <img alt="Wistia Video" src="images/thumbs/wistia_video.jpg" data-type="wistia" data-image="images/big/wistia_video.jpg" data-videoid="9oedgxuciv" data-description="Hey, the gallery plays Wistia videos too!"> <img alt="Preview Image 6" src="images/thumbs/thumb2.jpg" data-image="images/big/image2.jpg" data-description="Preview Image 6 Description"> <img alt="Sound Cloud Track" src="images/thumbs/sound_cloud.jpg" data-type="soundcloud" data-image="images/thumbs/sound_cloud.jpg" data-trackid="8390970" data-description="This gallery can play a soundcloud track"> <img alt="Preview Image 7" src="images/thumbs/thumb3.jpg" data-image="images/big/image3.jpg" data-description="Preview Image 7 Description"> <img alt="Preview Image 8" src="images/thumbs/thumb4.jpg" data-image="images/big/image4.jpg" data-description="Preview Image 8 Description"> <img alt="Preview Image 9" src="images/thumbs/thumb1.jpg" data-image="images/big/image1.jpg" data-description="Preview Image 9 Description"> <img alt="Preview Image 10" src="images/thumbs/thumb2.jpg" data-image="images/big/image2.jpg" data-description="Preview Image 10 Description"> <img alt="Preview Image 11" src="images/thumbs/thumb3.jpg" data-image="images/big/image3.jpg" data-description="Preview Image 11 Description"> </div>
4. Initialize the gallery with default options.
jQuery("#gallery").unitegallery();
5. Set the default gallery options.
//gallery width gallery_width:900, //gallery height gallery_height:500, //gallery minimal width when resizing gallery_min_width: 400, //gallery minimal height when resizing gallery_min_height: 300, //default,compact,grid,slider //select your desired theme from the list of themes. gallery_theme:"default", //default, alexis etc... - the global skin of the gallery. //Will change all gallery items by default. gallery_skin:"default", //all , minimal , visible - preload type of the images. //minimal - only image nabours will be loaded each time. //visible - visible thumbs images will be loaded each time. //all - load all the images first time. gallery_images_preload_type:"minimal", //true / false - begin slideshow autoplay on start gallery_autoplay:false, //play interval of the slideshow gallery_play_interval: 3000, //true,false - pause on mouseover when playing slideshow true/false gallery_pause_on_mouseover: true, //true,false - change this option, add more mousewheel choices gallery_control_thumbs_mousewheel:false, //true,false - enable / disble keyboard controls gallery_control_keyboard: true, //true,false - next button on last image goes to first image. gallery_carousel:true, //true, false - preserver ratio when on window resize gallery_preserve_ratio: true, //show error message when there is some error on the gallery area. gallery_debug_errors:false, //set custom background color. //If not set it will be taken from css. gallery_background_color: ""
Change logs:
2017-02-28
- v1.7.45
2015-11-05
- fixed some bugs
2015-10-24
- added Tiles - Nested gallery type
2015-09-05
- updated to version 1.6.6
2015-08-10
- small update.
2015-05-06
- updated to version 1.4.1
This awesome jQuery plugin is developed by vvvmax. For more Advanced Usages, please check the demo page or visit the official website.