Unite Gallery – Responsive jQuery Image and Video Gallery Plugin




css3-graph-icon

Unite Gallery – Responsive jQuery Image and Video Gallery Plugin.Aim to be the best gallery on the web on it’s kind.

The Unite Gallery is multipurpose javascript gallery based on jquery library. It’s built with a modular technique with a lot of accent of ease of use and customization. It’s very easy to customize the gallery, changing it’s skin via css, and even writing your own theme. Yet this gallery is very powerfull, fast and has the most of nowdays must have features like responsiveness, touch enabled and even zoom feature, it’s unique effect.

Features

  • The gallery plays VIDEO from: Youtube, Vimeo, HTML5, Wistia and SoundCloud (not a video but still )
  • Responsive – fits to every screen with automatic ratio preserve
  • Touch Enabled – Every gallery parts can be controlled by the touch on touch enabled devices
  • Responsive – The gallery can fit every screen size, and can respond to a screen size change.
  • Skinnable – Allow to change skin with ease in different css file without touching main gallery css.
  • Themable – The gallery has various of themes, each theme has it’s own options and features, but it uses gallery core objects
  • Zoom Effect – The gallery has unique zoom effect that could be applied within buttons, mouse wheel or pinch gesture on touch – enabled devices
  • Gallery Buttons – The gallery has buttons on it, like full screen or play/pause that optimized for touch devidces access
  • Keyboard controls – The gallery could be controlled by keyboard (left, right arrows)
  • Tons of options. The gallery has huge amount of options for every gallery object that make the customization process easy and fun.
  • Powerfull API – using the gallery API you can integrate the gallery into your website behaviour and use it with another items like lightboxes etc.

fully-functional-jquery-image-video-gallery-plugin-unite-gallery

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,<a href="http://www.jqueryscript.net/tags.php?/grid/">grid</a>,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: ""

Leave a Reply

Your email address will not be published. Required fields are marked *