vvvmax / unitegallery Goto Github PK

I run unitegallery on my local and test it on Firefox with Firebug, and when there're dozens pictures the library just load all of the thumbnails one time, although thumbnail is not big, but when there're hundreds of them, it can still be a heavy load.
If we only load 2 times of the number shown in thumbnail panel, and load rest of them in time, that'll be great!
I wonder if we already have this feature (I tried to find it but failed), if not, can we add it in the future?

I don't see any options for a tap zoom, vs a pinch zoom. Can that be added?

The library is very heavy around 200K. Which files(CSS and JS) are needed for common functionality to work. Maybe pick and choose the ones needed. I want to exclude video, for example.
Thanks

Hi

Is there any way to load images async? For example if I would like to show 100 images, but only load the previous 2 and next 2, to save memory in native phone webviews. These things are hard to find...

Or do you recommend some lazy-loading method?

Kind regards

Hi,
No default gallery fullscreen in browser IE! Press button Fullscreen and image size inside tag body.
In browser Opera and Firefox is work in Fullscreen.
How to make to worked in browser IE in Fullscreen?

I use auto play option with 8 sec interval, but often it takes about 6 sec to load the first image with all scripts even if it's only 200Kb. It would be nice to have a way to add a delay or to wait for the first photo to appear before the timer starts

Like the title say, flash fallback don't work on IE for HTML5 videos.

Is there any way to add an html slide?

There doesn't seem to be any destroy method available. If the gallery is playing, it continues to play even if all the html is removed and there are no more references to the "api" object. I assume there are a bunch of events bound which have no public method of unbinding that I can find.

Any help is appreciated.

Thanks

After a resize of the gallery via the api.resize() function the bottom panel in compact theme (that's my test case) looses its focus on the current image. The border overlay is not visible any more and the overlay of the current image has opacity 0.4 again.
Please fix this.

By the way: Great gallery. I'm excited.

Hi,
Thanks for the great component, was wondering is there a way to load the image whenever the user click on it to see the lightbox, in such case will deffer loading the big images until it get requested.
As per my test image data will load on the same time like src whenever the page is requested.

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'">

"Grid" theme, full of thumbnails.
When I click on any thumbnail, the related full image is displayed correctly, as well as the text-panel (description) on the bottom part of the viewport.
The problem arises when I press the "zoom" tile: the picture is correctly scaled, but the text-panel fades out. I may try to click any button, but unless selecting another thumbnail, there's no way to take the text-panel visible again.

On loading the gallery using this setup:

jQuery("#gallery").unitegallery({
                        gallery_theme: "grid",

                        gridpanel_enable_handle: true,
                        slider_enable_arrows: true,
                        slider_control_swipe: true, //enable swiping control
                        slider_control_zoom: true, //enable zooming control
                        slider_enable_fullscreen_button: false, //disable fullscreen button onslider element

                        theme_panel_position: "right",
                        grid_num_cols: 3, //number of grid columns,
                        gridpanel_vertical_scroll: false, //scroll horizontally,
                        gridpanel_grid_align: "top",

                        slider_enable_progress_indicator: true,
                        slider_enable_play_button: true,
                        slider_play_button_offset_hor: 45,
                        slider_play_button_offset_vert: 12,

                        slider_enable_zoom_panel: true,
                        slider_enable_text_panel: true,
                        strippanel_enable_handle: true
                    });

live example: http://unitegallery.net/index.php?page=grid-right

It zooms into the images by default because it is too large.
Is it possible to keep it zoomed out on loading/switch the images or disable the zoom all around?

Thanks

Is it possible to allow someone to zoom out, so that the image fills less than the full dimension? Right now, the button is greyed out unless you are zoomed in, and you can not pinch out on a touch device, it bounces right back to full size. I don't see any option in the unitegallery-options.js for changing this.

Hello,

I need to know how iI can load pictures dynamically from a javascript Array or an ajax call (from a url).
Thank you

Hello, I got the following error when using the api.selectItem() call:

Uncaught TypeError: Cannot read property 'hasClass' of undefinedg @ unitegallery.min.js:7
UGThumbsGeneral.setThumbSelected @ unitegallery.min.js:7
(anonymous function) @ unitegallery.min.js:7
m.event.dispatch @ jquery.min.js:3
m.event.add.r.handle @ jquery.min.js:3
m.event.trigger @ jquery.min.js:3
(anonymous function) @ jquery.min.js:3m.extend.each @ jquery.min.js:2
m.fn.m.each @ jquery.min.js:2
m.fn.extend.trigger @ jquery.min.js:3
UniteGalleryMain.selectItem @ unitegallery.min.js:4
UG_API.selectItem @ unitegallery.min.js:3
app.BeautyView.Backbone.View.extend.showImageModal @ model_view.js:27
m.event.dispatch @ jquery.min.js:3
m.event.add.r.handle @ jquery.min.js:3

here are my codes:

function openGallery(){
   var groupNo = e.target.getAttribute('grp');
   var imgNo = e.target.getAttribute('data-id');
//gallery is an array that stores several unitegallery
   gallery[groupNo].selectItem(imgNo);
   gallery[groupNo].enterFullscreen(); 
}

Am i using the api call correctly?

The resolution of the big images (for Youtube) is very poor on mobile devices - not the default image, but the other big images per playlist menu. Is the High Quality version of the "thumbnail" image (which is automatically generated by Youtube) not being used by mobile devices?

Using video skin with right side title only with autoplay false.

load images (big image and thumbs) from urls or json. Count of images are changeable for each page or request.

Above part will not be at .html
Can I reate this part at javascript file with for loop from json or array

Is it possible to have specific thumbnails in a gallery be set as links only rather than open in a lightbox or is it all need to open in a lightbox or all need to be links? I would like to have the option to have designated thumbnails link to a new page.

Hi consider adding more events to the API that way we can move from this slideshow to yours:
http://dev7studios.com/caroufredsel-old/custom-events.php

With all this events we can make more complex templates. :) Just a suggestion.

Hello everyone who use that pretty nice plugin.
I wonder if there is a way to disable thumbs panel in normal mode and enable it in fullscreen mode, and also change the behavior of prev/next buttons so that in normal mode they work as "Enter Full Screen" button and in fullscreen mode they act as usual - like prev/next buttons. Had someone such experience?

would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com/ with git autoupdate.
thank you very much!
cdnjs/cdnjs#5373

Hi,
How to make that if one image to thumbnail would hidden
Regards

When resizing browser window with a Carousel, the tiles showing change and shift as the window size changes. The expected behavior is that the same tiles should continue to show, just a reduced number.
If I have 5 tiles showing out of 26, say A B C D E F, in a Carousel and then reduce the size of the window to show just 3 tiles, I see M N O, instead of A B C.

I'm using "minimal" preload and need to download and manipulate images before they are displayed. I've added the following to your code:

        /**
         * 
         * set item to slide
         */
        function setImageToSlide(objSlide, objItem, isForce, isCallback){
                var setimage=g_options.slider_setimage; 

                //allow us to manipulate the object items before they are set -af
                if (!isCallback && typeof setimage=='function') {
                        setimage(objSlide, objItem, isForce, function(oS,oI,iF) {
                                setImageToSlide(oS,oI,iF,true); 
                        });
                }

                var objItemWrapper = objSlide.children(".ug-item-wrapper");

Please consider adding.

would you please consider adding package.json so that we can add your lib on https://cdnjs.com.
thank you very much!
cdnjs/cdnjs#5373

Portrait images should be displayed in 'contain' mode. Right now, they are zoomed in until they fill in the entire slider width. Any idea on how can I fix this?

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

What's the best way to detect a swipe left or a swipe right in your code? I'm trying to ad an admob event that happens after a few swipes, but can't figure out how to detect it, as 'swipeleft' and 'swiperight' aren't working.

For example, this line doesn't seem to be detecting it (the image slides are inside the 'gallery' div):
$("#gallery").on("swipeleft",function(event) {

With the tile nested view, when activating the description display on the lightbox text panel with :

lightbox_textpanel_enable_description: true

The source of the text is always the alt atribute of the img tag, but not the data-description parameter

<img data-image="NYC_SKYLINE_10.jpg" data-description="Description NYC Skyline 16" style="display:none" alt="NYC Skyline 16" src="/fileadmin/_processed_/csm_NYC_SKYLINE_10_514abffc12.jpg" width="375" height="251" title="NYC Skyline 16" />

Hi,

I have a layout in wich there is a left side with different options and at the right side it is shown different galleries with the unitegallery plugin.

By forcing the left side to be widder for debug purpouses the gallery is shown below, instead change the columns from three to two what is what I am looking for. It could be the case becasue low resolutions the current layout has not enough space and I want the unitegallery changes automatically to two columns insetead to be shown below taking the whole width of the screen.

Any ideas to achive this?
There is any option am I missing?

Thanks in advance.

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.

I'm trying to use unitegallery in a jquery.mobile app, and there seems to be a conflict with jquery.mobile. (When I strip out the references to jquery.mobile, the errors disappear.) But I wonder if you could help me figure out what I could change in unitegallery.js to fix it.

The error happens when I leave the gallery page and then return. It has to do with the indexing of the images. It says "Error: item with index: 8 not found", and using Firefox's Inspect Element, it points to line 4684 in unitegallery.js.

Other than that, it's working great. Any help would be appreciated. Thanks!
.

I have added the default UniteGallery to a site that I am working on. It seems that the gallery container is hitting a maximum size and I am not finding the limiting code. You can see the page here http://www.e2vservices.com/test/photos.html

I would like the gallery to continue to fill the parent container even on large monitors with high resolution settings.

edit It seems the gallery is being limited by a .height restriction of 500px somewhere.

Thanks,
DixonGrfx

According to the documentation i should include

 <script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script> 

(http://unitegallery.net/index.php?page=documentation#installing_the_gallery)

But I can't find this file in the js folder. Which file(s) should I include bare minimum?

Visual Studio warns for some potential issues in the "unitegallery.js" (not minimized) module. Please, check if the following are mistakes:
Function "scaleImageFitParent". There is a couple of assignments (?) which look like conditions instead:
updateCss == true

Function "onTouchEnd". Same as above:
g_temp.isPanActive == false;

Function "hideArrows". The if's trailing semicolon is probably wrong:
if(isMouseInsideImage() == true);

I temporarily patched my cached copy of the module.

I'd like to add some animation to my Unitegallery tiles structure, and I've planned to use Animate.css from Daniel Eden.

https://daneden.github.io/animate.css/

Html structure:

 <div id="introGalleryLarge" class="hide-on-med-and-down" >
   <a href="#">
    <img alt=""
    src="assets/img/chi/thumbs/chi1.jpg"
    data-image="assets/img/chi/big/chi1.jpg"
    data-description=""
    >
  </a>
  <a href="#">
    <img alt=""
    src="assets/img/chi/thumbs/chi2.jpg"
    data-image="assets/img/chi/big/chi2.jpg"
    data-description=""
    >
  </a>
  <a href="#">
    <img alt=""
    src="assets/img/chi/thumbs/chi3.jpg"
    data-image="assets/img/chi/big/chi3.jpg"
    data-description=""
    >
  </a>

and others...

I tried to add directly class="animated bounceIn" (example) to the a element and also to img element but unfortunately nothing happened.

So I put a span tag as a wrapper in this way:

<span class="animated bounceIn">
 <a href="#">
    <img alt=""
    src="assets/img/chi/thumbs/chi1.jpg"
    data-image="assets/img/chi/big/chi1.jpg"
    data-description=""
    >
  </a>
</span>

and the animation is ok, it's works, but then, Unitegallery plugin stopped working.

Is there a way to use your plugin with animate.css?

Thanks

Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?

Thanks for your great work!!
Piicksarn

I add +1 button and FB like share to page , Console display error:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://mydomain.com" from accessing a frame with origin "https://apis.google.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://mydomain.com" from accessing a frame with origin "https://s-static.ak.facebook.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

How to fix, pleases???

First off, awesome job.
Then, I noticed an error in the "getElementSize" function (roughly before line 600):
var obj = element.position();
returns "undefined" while entering/exiting the full-screen state. A trivial patch like the following seems working fine:
var obj = element.position() || {};
I used the "Grid" theme only.
Tested only on Windows 10, but only on both IE11 and Chrome (latest).

Hi,

In my application we cannot use IDs because of potential content duplication and IDs clashing. I modified the source to not depend on IDs so tightly, but just pointing out that the strong dependence isn't really beneficial.

Things like "#" + element are also an extra step to compute the concatenated string. Best if one parent element is found and saved as an object, rather than a substring.

Great library otherwise!

Thank you for your great plugin!
I use carousel theme with carousel_autoplay=true and for some reasons I need to have number of instances of UG on one page. But because of this I have some performance issues. How can I stop/start carousel autoplay without triggering click event for pause button (I use with option theme_enable_navigation=false)? It will be great feature, if carousel stops autoplay, when it out of a viewport and resumes when in viewport.

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?

Ehi there,

I've a Unitegallery gallery coded in this way:

  <div id="gallery">

          <a href="">
            <img alt=""
            src="images/thumbs/tile2.jpg"
            data-image="images/big/tile2.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile4.jpg"
            data-image="images/big/tile4.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile1.jpg"
            data-image="images/big/tile1.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile7.jpg"
            data-image="images/big/tile7.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile3.jpg"
            data-image="images/big/tile3.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile5.jpg"
            data-image="images/big/tile5.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile6.jpg"
            data-image="images/big/tile6.jpg"
            data-description=""
            style="">
          </a>

          <a href="">
            <img alt=""
            src="images/thumbs/tile9.jpg"
            data-image="images/big/tile9.jpg"
            data-description=""
            style="">
          </a>

          <a class="hide-image" href="">
            <img alt=""
            src="images/thumbs/tile8.jpg"
            data-image="images/big/tile8.jpg"
            data-description=""
            style="">
          </a>

          <a class="hide-image" href="">
            <img alt=""
            src="images/thumbs/tile10.jpg"
            data-image="images/big/tile10.jpg"
            data-description=""
            style="">
          </a>
        </div>

and initialized in the following way:

 jQuery("#gallery").unitegallery({
   theme_enable_preloader: true,    //enable preloader circle
          theme_preloading_height: 200,   //the height of the preloading div, it show before the gallery
          theme_preloader_vertpos: 100,   //the vertical position of the preloader
          theme_gallery_padding: 0,     //the horizontal padding of the gallery from the sides
          theme_auto_open:null,        //auto open lightbox at start - if some number gived, like 0

          tiles_justified_row_height: 50,  //base row height of the justified type
          tiles_justified_space_between: 1, //space between the tiles justified type
          tiles_enable_transition: true,    //enable transition when screen width change

          tile_enable_overlay: true,      //enable tile color overlay (on mouseover)
          tile_overlay_opacity: 0.4,      //tile overlay opacity
          tile_overlay_color: "#222222",    //tile overlay color

          tile_enable_icons: false,      //enable icons in mouseover mode

  });

I need to hide the two terminal elements when viewport width is greater than 1280px and viewport height is greater than 720px.

So, I added hide-image class to the selected elements and I wrote this simple statement:

 if(w_outer >= 1280 && h_outer >= 720 ){
      $('#gallery a.hide-image').remove();
  } 

But unfortunately it does not work? I need some help, thanks

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.

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?

Hi,
First, thank you for this great job.
It is possible to reverse the effect of the overlay on Tiles-Columns?
Thank's for your answer.
Regards

Message on page
"Unite Gallery Error: The gallery can run from jquery 1.8 You have jQuery 2.1.0 Please update your jQuery library."

I have jquery loaded with version 2.1.0 and the minimum version required is 1.8.0,
In function checkMinJqueryVersion outputs a wrong validation!!
After spliting the versions by "." it does like this
1º step - 2>1 => true
2º step - 1>8 => false => outputs "!1" . which is wrong!!! because in fist step 2 is bigger than 1, in other words 2.1 is bigger than 1.8