Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

Overview

##Unite Gallery - Responsive jQuery Gallery Plugin

Product Link: unitegallery.net

This gallery has commercial versions for: WordPress , Joomla! , PrestaShop , OpenCart

Main Documentation: [main documentation page] (http://unitegallery.net/index.php?page=documentation)

Themes including and options help under each theme menu as here for example

Overview

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.
Comments
  • Can not display the gallery on init

    Can not display the gallery on init

    Hi,

    Wonderfull library !

    In my case, I would not display the gallery #div on init (page) but only when the I switches to fullscreen mode (I want to see the gallery ONLY in fullscreen mode) . Actually the gallery #div is displayed on the init ....

    g_uniteGallery = jQuery("#hbt-gallery").unitegallery({ gallery_theme: "grid", theme_panel_position: "right", slider_scale_mode: "fit" });

            g_uniteGallery.on("enter_fullscreen", function () {
                $("#hbt-gallery").show();
            });
    
            g_uniteGallery.on("exit_fullscreen", function () {
                $("#hbt-gallery").hide();
            });
    

    Regards Frederik

    opened by maverick42 13
  • After loading opacity on image is 0

    After loading opacity on image is 0

    Hi, I do not use plugin of UniteGallery, I need to have everything under my control :) When Unitegallery is initialised, it leave sometimes (not every time 3 times from 10) opacity 0 on images. ...after hover they are showed and opacity is changed to 1. I cannot imagine, what is a problem. here are pictures, that u can see it: http://s23.postimg.org/vzb7twj97/opacity.jpg , http://s2.postimg.org/44526748p/opacity1.jpg

    opened by Peter74 11
  • Can't fire unitegallery again

    Can't fire unitegallery again

    Hi, I cannot call the $(#'selector').unitegallery() again after closing the gallery, i.e. only the first call success, the other calls of the same element will get errors. I get the 'Uncaught Error: The item should not be image type'.

    How can I fix this? Thanks for your help.

    opened by DevCilla 11
  • One gallery shown when multiple instances initiated

    One gallery shown when multiple instances initiated

    Hi, I have pages that need multiple galleries to be shown.

    I initiate it this way:

    function galleries() {
        $(".content-gallery").each(function (a, gallery) {
            var gallOpts = DEFAULT_GALL_OPTS;
            var $gall = $(gallery);
      // setting options
            $gall.unitegallery(gallOpts);
        });
    

    html markup:

    <div id="gallery_2" class="content-gallery" style="width: 740px; margin-left: -140px; height: 400px;">
      <img src="/1.png" data-image="/1.png" alt="Title1" class="content-image" style="width: 740px;">
      <img src="/2.jpg" data-image="/2.jpg" alt="ttt" class="content-image" style="width: 740px;">
    </div>
    <div id="gallery_1" class="content-gallery full-width">
      <img src="/1.png" data-image="/1.png" alt="Title1" class="content-image">
      <img src="/3.png" data-image="/3.png" alt="Caption!" class="content-image" >
      <img src="/4.jpg" data-image="/4.jpg" alt="Pec" class="content-image">
    </div>
    

    Alas, it shows only the first gallery. Any ideas?

    opened by ayoupov 10
  • Image error handler

    Image error handler

    Hi, as the images shown in my gallery are randomly get from the Internet, are there any error handlers once the image is not exists? I tried the onerror attribute was not working in this case

    <img src="http://somewhere-thumb.jpg" data-image="http://somewhere-large.jpg" onerror="this.src='/images/noimage.jpg'">
    
    opened by DevCilla 9
  • Bower.json

    Bower.json

    may you please add this excellent package to bower? Also, it would better if you exclude demos and third party js files (jquery) form the bower package. thanks.

    opened by salarmehr 7
  • Support for lightbox in default/compact/grid theme

    Support for lightbox in default/compact/grid theme

    Hi, I'm missing support for lightbox in default/compact/grid themes.

    Thanks to user tracking on our website we have found that users don't know how to close fullscreen gallery (they open gallery, click on black background (=nothing happen) and then leave). Compact lightbox would be even better.

    Any workaround would be great.

    opened by wodCZ 7
  • How to add custom icons and custom data attribute

    How to add custom icons and custom data attribute

    Hi, I want to use this plugin in one of my websites but doesn't have any option to add custom icons to image except the default icons provided e.g. lightbox and link icons. I wanted to add one more icon for wishlist (heart icon) and wanted to add it the shown item to the cart when users click on heat sign. I managed to add heart icon but when I added data-id="4" (let for example) to image so that I can manipulate my logic for adding the item to the cart, it removes data-id attribute from images.

    Is there any way to do this? Your documentation on http://unitegallery.net/index.php?page=documentation#using_the_api is not clear as well. Here is my code-

    `jQuery("#gallery").unitegallery({
        tiles_type:"nested",
        lightbox_slider_control_zoom:false,
        tile_enable_icons: true,            //enable icons in mouseover mode
        tile_show_link_icon: true, 
        tile_enable_textpanel: true,           //enable textpanel
        tile_textpanel_source: "title",
        tile_textpanel_always_on: false,        //textpanel always visible
        tile_textpanel_appear_type: "slide",    //slide, fade - appear type of the textpanel on mouseover
        tile_textpanel_position:"inside_bottom", //inside_bottom, inside_top, inside_center, top, bottom the position of the textpanel
        tile_textpanel_offset:0,    
     });`
    

    and here is code to add heart icon-

    `setTimeout(function(){
         jQuery(document).find('.ug-thumb-wrapper').each(function(){
             var l = jQuery(this).find('div.ug-icon-zoom').css('left') || 0;
             var t = jQuery(this).find('div.ug-icon-zoom').css('top') || 0;
             var newl= l.split('px');
             var newle=parseInt(newl[0] || 0)+parseInt(33)+'px';
             var newt= t.split('px');
             var newte=parseInt(newt[0] || 0)+parseInt(5)+'px';
             jQuery(this).find('div.ug-icon-zoom')
             .after('<div class="ug-tile-icon ui-heart white_heart" style="position: absolute; margin: 0px; left: '+newle+'; top: '+newte+';"><i class="fa fa-heart" style="font-size:30px" onClick="javascript:addToCart('+id+',1)" ></i></div>');
         });
     },1000);`
    
    opened by RNKushwaha 6
  • Plugin stops propagation of all left/right arrow key presses events

    Plugin stops propagation of all left/right arrow key presses events

    Hello Max!

    I’ve noticed that Unitgallery catches left/right arrow key pressing events and stops their propagation. So when focus is in a textarea, the user can switch between rows by pressing up/down arrow key, but he/she can’t move cursor to left or right. Can you add some option, which will tell the plugin: catch left/right arrow key pressing events only, if Unitgallery element has :hover or :focus state or some sort of that?

    opened by erinsasha 6
  • Open a Lightbox oder Video-item from outside the gallery

    Open a Lightbox oder Video-item from outside the gallery

    How is it possible I use a overlay to show some more Information about a Video. I need there a link to open the corrsespnding Video from the gallery (justified). Is it possible to open the (Video)Video oder the Lightbox-Item from outside the Gallery?

    opened by skerbis 5
  • Multiple Galleries in the same page

    Multiple Galleries in the same page

    HI @vvvmax is there the possibility of having multiple galleries on the same page, for example using the classes? Or otherwise use more IDs, rather than just #gallery Thanks in advance!

    opened by esseifforte 4
  • Always show video controls

    Always show video controls

    Is there a way to always show the video controls when playing a video? I have set up an "Orientation Website" with a gallery of videos to be used on an Android Tablet, however, after a video begins playing, the controls disappear, and touching the screen does not bring them back up.

    Thank you,

    opened by ucfknight4life 0
  • Button onclick open lightbox at first item?

    Button onclick open lightbox at first item?

    Sorry if there is a better place to ask this... but is there a way to open the lightbox on the first item from a button elsewhere on a page? Basically the same function as clicking the first thumbnail on the tile theme. api.enterFullscreen() does not have the desired outcome.

    Thanks for the gallery!

    opened by Galactopus 0
  • Support srcset and picture

    Support srcset and picture

    It would be great if Unite Gallery support the srcset and sizes attributes and the picture element for full responsive functionality.

    srcset and sizes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    Why support picture element: https://css-tricks.com/using-webp-images/

    opened by thomaskrakow 1
  • Escape button to exit fullscreen mode

    Escape button to exit fullscreen mode

    How to add an escape button or text to exit fullscreen mode, or change the actual fullscreen button to a different one that makes clear that its funtion is to exit fullscreen?

    opened by alexmathias 0
Releases(1.7.40)
null 3.9k Dec 30, 2022
ASP.NET Core image gallery with Marten, ImageSharp, and HTMX

Image Gallery This sample uses the following core technologies to deliver an image gallery experience: ASP.NET Core Marten ImageSharp.Web HTMX This al

Khalid Abuhakmeh 11 Feb 9, 2022
A very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8 block

JPEG Sandbox This is a very barebones editor that supports clicking on any pixel in a JPEG image to see the 64 DCT coefficients that make up that 8x8

Omar Shehata 383 Jan 2, 2023
jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

boblemarin 327 Oct 27, 2022
DEPRECATED jQuery Responsive Carousel.

YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO tiny-slider Owl Carousel 2 Touch enabled jQuery plugin that lets you create a beau

null 7.7k Jan 4, 2023
Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

Verti Studio 1.2k Dec 24, 2022
A light wight javascript image viewing plugin with smooth animation and 0 dependence

A light wight javascript image viewing plugin with smooth animation and 0 dependence

null 50 Nov 12, 2022
jQuery plugin that blows your visitors' retinas

Dense.js Homepage | Issues | Dense is a jQuery plugin for serving retina-ready, high pixel ratio images with ease. Small, ease-to-adapt, yet very cust

Jukka Svahn 212 Jun 30, 2022
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Orion Gunning 455 Nov 6, 2022
jQuery plugin based on raphael.js that allows you to display dynamic vector maps

jQuery Mapael - Dynamic vector maps The complete documentation is available on Mapael website (repository: 'neveldo/mapael-documentation'). Additional

Vincent Brouté 1k Jan 5, 2023
A jquery plugin for comparing two images

jQuery Images Compare A jquery plugin for comparing two images Badges Features compatibility : ie9+ Effort to put appearance via css (easier to skin /

Sylvain Combes 49 Sep 5, 2022
Resize image in browser with high quality and high speed

pica - high quality image resize in browser Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technolo

Nodeca 3.2k Dec 27, 2022
:woman: Library for image processing

Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt

Davidson Fellipe 558 Dec 28, 2022
🌅 Content-aware image resizer based on Seam Carving algorithm

Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable.

Oleksii Trekhleb 1.4k Dec 30, 2022
Get the first frame of a Gif image.

Get the first frame of a Gif image.

lijialiang 3 Apr 8, 2022
An image post-processing code library

WebGPU image filter Preview online 这是一个用来展示 webgpu 在图片处理方面应用的 demo,但由于 webgpu API 还不稳定,本地都需要经常修改 API 才能跟上金丝雀的脚步,所以本项目的效果目前也还不稳定,目前仅供学习交流。

kuake 4 Mar 8, 2022
Doblar - a fully local image converter that runs in your browser

Doblar is a fully local image converter that runs in your browser. Doblar is purely client side: nothing is uploaded to a server or anything like that. All conversions take place in your browser, which means your files never leave your computer.

Armaan A 28 Dec 17, 2022
A simple image diff tool powered by avernakis.

Image Diff English | 简体中文 Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

null 45 Dec 3, 2022
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper

Cropper A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with Cropper.js. Demo Cropper.js - JavaScript image

Fengyuan Chen 7.8k Dec 27, 2022