First off, thanks for this beautiful library, it is very user-friendly and does precisely what I want it to! I submitted a couple of nice-to-have feature requests separately from this issue to make them easier to track.

I'm having some issues with Chrome-on-Android:

• I use pagination and sometimes, it seems like after the gallery is fully loaded, I can no longer swipe to the next page. I can still use the page number buttons to move from page to page. I'm also getting the problem with pagination that is mentioned in issue #11.
• Similarly, I often can't open the lightbox. There is just no more response to me pressing on the thumbnails.
• The first image to open in the lightbox is shown fullscreen; subsequent images usually have a small black border around them. After some testing I now think that the images that are pre-loaded appear with a border, and the ones that still have to be loaded (while you see the loading animation) appear full screen. The images that are full screen seem to shrink a bit before they disappear as I swipe right or press the right arrow. Compare this to this.

I know these descriptions are not very specific, please let me know if I can help by getting you more detailed information.

My homepage ( http://rodrigosieja.com.br/index_old.html ) has 4 galleries. Some gallery or galleries will appear randomly - either of the wrong "section", or repeating itself on the other sections.

The occurrence is random, mostly when scrolling down before the page is fully loaded.

Screenshot:

Hi
My flickr album contains videos.
Why do not I get to play the videos?
thank you very much !!

Just some details :)

In demonstration part:

In Content Source>Self hosted:

Self hosted images. Note the uss of the parameter "itemsBaseURL" to avoid full URL for each image and thumbnail.

In Content Source>Self Hosted - albums:

Self hosted images. When usiung albums, IDs muty be assigned to each element (images and albums).

In Layouts>Cascading:

Display an album the cascading layout. Label is positioned under the thumbanil. The thumbnail height is set to "auto".

In Gallery display modes>Pagination - numbers:

Display 2 rows of thumbnails and numbers bellow to paginate.

Last one also present in Pagination - dots

-loading images from google photos is realy slow, especially when they are too big.. >5mb
-You could say, please do not upload too big or original photos on google photos, or resize them first with a resize tool, but i want them for safety reasons in ORIGINAL state uploaded.
-I want to have the originals on google photos but serve lower quality and size on the gallery to speed up things.
-Is it possible;

Feature request: Allow specification of the number of images to preload in the lightbox.

(Right now, I think only the next image is preloaded?)

It would be nice if the lightbox opened fullscreen on mobile browsers or if the address bar got hidden automatically when viewing pictures in the lightbox. The address bar takes up quite a lot of space, especially when viewing pictures in landscape mode.

(I haven't done this myself, but it seems like this could be achieved by either a call to requestFullscreen, which is not universally supported, or by top-padding the page a bit and automatically scrolling down using JavaScript.)

Hi ,
I tried using this $('#your_nanogallery2').nanogallery2('search', search_string); it successfully search Album Names,Is there any way to search keywords including images inside Albums ?

Also,I wanted to add appropriate message for user if the album with specified keyword is not found.How do i do it ?

Hi Christophe, very nice piece of work indeed!
I have installed your latest nanogallery2 and nanogp, but what I get displayed are the G+ photos for that account instead of the Google Photos, weird isn't it? When I use the same credentials on your builder page I get the right photos.
What can be the cause? My setup is on Windows/IIS with php enabled and I use the hosted jquery 1.9.1. Same result with your jquery 2.1.1 instruction on cloudflare.

I also tried the portable beta version, but then I get
"nanogallery2: Could not retrieve Google data. Error: Missing access token. Please grant authorization. [ngy2p]"

Hi,
Is Google Photo still supported?
If I create new albums from Google Photo, the gallery doesn't display them.

Thanks

If one enables thumbnailSelectable: true , the Select icon is toggled if the entire image or album image is clicked , not just when the icon itself is clicked, even though the icon toggles to a checkbox. If ones first selects the image and then clicks to see the lightbox, the nGY2GThumbnailIconImageSelect icon is toggled off instead of the lightbox opening, so you have to click twice and then your image is now unselected. One expects the GUI to work like the other thumbnail icons. Clicking on share opens the share dialog, clicking on download, downloads the image, etc. so shouldn't clicking the select icon just toggle the icon and not disable the lightbox? It seems that clicking on the image should not toggle the select icon, only clicking the icon itself.
I want to be able to use the select icon so users can toggle images as "favorites" and still be able to open the lightbox, which is not possible. Thanks

I've two Samsung devices and the demo page http://nanogallery2.nanostudio.org/ shows no galleries.
See screen shot.

nanaGallery (original) does work.
I look forward to this being fixed as it's a great plugin

I am getting an error, TypeError: a is undefined when using a custom color for colorSchemeViewer.

Using:

var customColorViewer ={background:'#000',imageBorder:'none',imageBoxShadow:'none',barBackground:'rgba(4, 4, 4, 0.7)',barBorder:'0px solid #111',barColor:'#eee',barDescriptionColor:'#aaa'};

and colorSchemeViewer: customColorViewer,, I get the error and the viewer fails to open on click.

If I use colorSchemeViewer: null, I do not get an error and everything works as it should

I'm trying to solve two issues with image description in my project with nanogallery 2 using Google photos:

1. Is possible to use image description from EXIF instead of the one coming from google?

2. Currently if google description is empty, nanogallery2 replaces it with filename. I want to display description only if there is one, I don't want to display filename. So far I did it (and it works) by removing condition in the javascript section //Get the description:
   if( itemDescription != '' )
   but I wonder if there is some "clean" way doing it in configuration.

Thanks a lot for any recommendation :-)

I registered a callback (myImgToolbarCustDisplay) in my nanoGallery2 Javascript definition. However it seems that the callback is ignored. The alert(); is not popping up.

Please find attached an example on codepen:
https://codepen.io/anon/pen/PmmyZy

when i try your example ,i got nothing other than above mentioned error.pls help.

This screenshot will simply demonstrate the issue:

If one or both of the thumbnail sizes is set to auto then the code at rows 12036 - 12045 in the raw js will fail in computing the right length/width, and set one or the other to "NaN"

The code inside the function "GoogleAddOneThumbSize" is meant to catch the "auto" cases but doesn't because the variable it is passed is the result of a multiplication, and so gets the NaN. This means that the sizes don't compute all the way through and the RSS produced is broken.

How to reproduce
Set up with google photos as source, and set one or other thumbnail height/width to auto (i.e. choose a cascading or justified style); attempt to load page.

How to fix this code
The quickest way is to replace lines 12050 and 12053 in the raw. js as follows, from:
`function GoogleAddOneThumbSize(thumbSizes, v1, v2, c1, c2 ) {
var v = Math.ceil( v2 * G.tn.scale ) + c2;
if( v1 == 'auto' ) {
v = Math.ceil( v2 * G.tn.scale ) + c2;
}
else if( v2 == 'auto' ) {
v = Math.ceil( v1 * G.tn.scale ) + c1;
}
else if( v1 > v2 ) {
v = Math.ceil( v1 * G.tn.scale ) + c1;
}

  if( thumbSizes.length > 0 ) {
    thumbSizes += ',';
  }
  thumbSizes += v;
  return thumbSizes;
}`

to

`function GoogleAddOneThumbSize(thumbSizes, v1, v2, c1, c2 ) {
var v = Math.ceil( v2 * G.tn.scale ) + c2;
if(isNaN(v1)) {
v = Math.ceil( v2 * G.tn.scale ) + c2;
}
else if( isNaN(v2) ) {
v = Math.ceil( v1 * G.tn.scale ) + c1;
}
else if( v1 > v2 ) {
v = Math.ceil( v1 * G.tn.scale ) + c1;
}

  if( thumbSizes.length > 0 ) {
    thumbSizes += ',';
  }
  thumbSizes += v;
  return thumbSizes;
}`

I have submitted a pull request to fix this in this way

This used to work in nanogallery1, but doesn't anymore in v2.
I didn't find anything in the docs (not even a click event for images in the viewer).
Great gallery and update btw ;)

I am wondering if this is an active option setting and how one utilizes it. Not seeing any documentation or a way to enable it for individual images. Thanks for any info!

Allow specification of a download URL that is different from the large-scale image.

Use case: I want my users to be able to download full-size images through the download button (5MB+), but I don't want to use these for online viewing.

Allow smaller images to be stretched to the window size (by default), similar to how large images are made to fit a smaller window.

Use case: Mainly for high-resolution but small-screen mobile phones.

slideshow mode stopped after 1 image
on iPhone and Android

When starting the lightbox in fullscreen using viewerFullscreen: true, the state of the full screen icon (viewerFullscreenOn / viewerFullscreenOff) does not get the proper value. The viewerFullscreenOn icon is shown; when exiting full screen mode, the viewerFullscreenOff icon is displayed.

Hi there. Thanks for the wonderful update to the Nanogallery - I'm sure it was a ton of effort.

I'm noticing what appear to be issues with custom color schemes. None of the value changes seem to be taking.

Can you please have a look at this CodePen and let me know if I'm doing something wrong?

thanks

Display the burred image to fill the screen behind this image.

Hi,
In woocommerce when i change tabs the images are not loading.
i have to do a little scroll.
Tnks

Hello!

Thank you very much for your library!

This is the best solution of all existing! (I conducted a study.)

But I had a few problems:

1. Options "background" and "borderColor" in "colorScheme.thumbnail" does not work.
   My temporary solution:

#nanogallery2.nGY2 .nGY2GThumbnail {
	background-color: #fff;
}

2. If use data source self hosted when the page is scrolled up or down, thumbnails disappear and are re-draw (.nGY2GThumbnail display: none and display: block). If set value "0" in options "thumbnailDisplayInterval" and "thumbnailDisplayTransitionDuration" then it does not help.
   Please see this video.
   I think if use data source self hosted then it's not necessary.
3. Option "galleryLastRowFull" does not work. Please see my example.

My example.

My wishes:

1. Add the ability to create a language file. For translate all button, modal window "Share to".
2. Add the ability to add a button to another social network in share. Example "VK.com".
3. Add in the ability to remove parameters "ID" and "gallery_id" (if gallery_id = 0) from share link.
   Example link: http://example.com/nanogallery2.html#nanogallery/nanogallery2/0/3
   Would be better: http://example.com/nanogallery2.html#nanogallery/3
4. Make separate js files plugins of data sources.
   Example:

jquery.nanogallery2.core.min.js
jquery.nanogallery2.google.min.js
jquery.nanogallery2.flickr.min.js
jquery.nanogallery2.local.min.js

Thanks!

Current version gives this error when image info button is clicked and the info modal is not activated.
Also noted on nanogallery2 web site.

ReferenceError: ViewerInfoSet is not defined

I have recently had to make the switch from 'nanoGALLERY' to 'nanogallery2' in order to continue using Google Photos for new albums. I've successfully set this up and my web page is now displaying new albums. Whilst I've come to accept some minor cosmetic changes to the gallery layout, there are some properties which I originally had which have now been deprecated, and fundamental aspects of my page's operation relied on these.

In particular, I'm referring to the refreshSize property. I won't try and explain why I needed this but it IS needed. Can you please either consider re-adding, at least, this property or giving me a method for manually adding it to my copy of the code?

Thanks

auto hide toolbars after a couple of seconds of inactivity

The getItems API command does not seem to be working. It does not return a list of items, but rather the jQuery element containing the entire gallery.

The pageChanged.nanogallery2 event is fired when moving to the previous or the next page, but not when moving to a specific page (by clicking on a specific rectangle/page number/...). This is also the case in the demo gallery at http://nanogallery2.nanostudio.org/api.html. Is this intended behavior, and if so, can we get an event that is also fired when moving to a specific page?

edit: itemSelected.nanogallery2 and itemUnSelected.nanogallery2 are also not triggered by calls to itemsSetSelectedValue. Is this intentional?

Code is using incorrrectly cs.navigationFilter.borderRadius instead of cs.navigationBreadcrumb.borderRadius: https://github.com/nanostudio-org/nanogallery2/blob/master/src/jquery.nanogallery2.core.js#L5530

The information on how to setup galleryFilterTags is confusing, especially for self hosted images. It states that the options are the possible values: false, true, 'title', 'description'. Could there be a clarification of how this works? It states I need to use a "string starting with @" but if I do that, I get my title text and and also @filter showing in the title text as well. I really don't want to see the @filter part, I just want to enable the filter itself. Also, what is the difference between true and 'title' of "description'? If I set true, do I use title? An example would be very helpful. Thanks

Hello,

Love the new gallery! I's there any way to pass a keyword for searching a flickr gallery album photos title and description or tags ?

I want to add a search box to my gallery page so visitors can do a keyword search on my photos and display them in an album view. I was thinking I would need to first generate a new/temporary album on flickr based on the keyword passed via flickr API, then get nanoGalley2 to display that album ?

Does anyone have any ideas ?

Thank you.

Hi! I've just found this plugin and was browsing through the demonstrations, and found two that don't work. I'll post screencaps here.

I'm loading images dynamically from Firebase and due to the async nature of this I want to display images as they become available.

I thought I could just call nanoGallery() on my div again each time, but then not all images are visible.

Currently I'm just doing it after the last image was loaded, but this causes a long delay until the user sees something on the website.

https://github.com/d4rken/rollkuchen/blob/master/web/public/index.html#L60

Is this an issue with nanogallery or an issue with my code? (I'm quite new to webdev)

Maybe somekind of threading/race condition issue?

I have enabled LocationHash and the browser Forward and Back buttons work well within an album. But if I try to select the back button to go back to the base album list from an album, the URL changes but the content remains fixed.

If I define nanogallery2 as follows

			<div data-nanogallery2='{ 
				"kind": "flickr",
				"userID": "<my user id>", 
				"galleryMaxRows": 2,
				"thumbnailHeight": "auto",
				"thumbnailWidth": 336.66,
				"galleryDisplayMode": "pagination",
				"thumbnailBorderHorizontal": 0,
				"thumbnailBorderVertical": 0,
				"thumbnailGutterWidth": 30,
				"thumbnailGutterHeight": 30
			}' ></div>

Nanogallery2 will load all images, instead of displaying pagination..

I have my thumbs with the same height and auto width created, but I always have .nGY2GThumbnailImage styled as width='300' height='200' Result is blurred thumbs with the same size. Is it a bug or I have miss something?

I have an issue with portrait photo's taken with an Iphone ans stored on google photo's. The thumbnails are displayed correct, but the large photo's are displayed landscape.

Home page says;

a javascript for creating beautiful, modern and high quality image galleries.

Missing the word "library" or "plugin" after the word "javascript".

Hello,

I have a problem when displaying my gallery on my Samsung phone Galaxy i9300 using Chrome and other browsers. The gallery pulls to the left (offscreen) when scrolling down the page dragging the thumbnails. It works fine when dragging using the scroll bar on the far right. The further to the left I place my finger on the screen the items dont scroll off to the left as far as when I pull down from closer to the right of the screen. You can see it here on this video I recorded: https://youtu.be/K3ujhHKong4

The OS is CM Android 7.1.1. Also on stock OS (verified by a friend). I have a simple gallery setup to test this here: https://www.hiphopdontstop.info/dev/gallery2.php

A few issues I’ve noticed while testing using Chrome on an Android device and using Developer tools on the desktop.

When the internal viewer is opened, then the page is resized (for example by rotating a phone from landscape to portrait) and then the viewer is closed, the gallery does not display properly until there is a scroll event.

Using thumbnailHoverEffect2: 'toolsAppear' only works on the first tool with class .nGY2GThumbnailIcons in the thumbnail. So, if multiple icons are specified in thumbnailToolbarImage (e.g. topRight, topLeft), only one of them has the filter applied. The issue may be related to the function NGY2Item.prototype.CSSFilterApply, lines
obj.$elt[0].style.WebkitFilter= v;
obj.$elt[0].style.filter= v;

On a touch/mobile device using thumbnailHoverEffect2 such as labelAppear75, opening and closing the internal viewer results in the thumbnail losing the hover effect. But, a single tap on the same thumbnail will re-open the internal viewer without first displaying the hover effect (tested with touchAutoOpenDelay values of 0, and -1).

JSFiddle: https://jsfiddle.net/Aybarra/69t3jjLo/

Callbacks in Javascript mode are ignored. This worked with nanoGallery1 before.

Please find attached an example on codepen:
https://codepen.io/anon/pen/PmmyZy

When enabling thumbnail selection, the first thumbnail needs to be pressed on the circle in the upper left corner; otherwise, the lightbox opens with a view on the picture and the picture remains unselected. All subsequent pictures can be selected by clicking in the middle of the thumbnail.