Fully Functional jQuery Image/Video Gallery Plugin - Unite Gallery

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.