kris-b / nanogallery Goto Github PK

hi
can you show an example with infinitescroll plugin:
https://github.com/paulirish/infinite-scroll

thanks!!

There does not appear to be any documentation showing how to use the new authKey functionality for Picassa (sorry if I am just missing it).

From looking at the js, it appears I should use a setting like this:

albumList:'Couples&authkey=Gv1sRgCKDcm43LwK-PsgE|Gala&authkey=Gv1sRgCMGJhdnb49PEbQ'

That is not working any differently from not using authkey at all, though. Do I have the syntax wrong, or am I completely missing something?

I have read over the release notes from the version which we were running to the latest upgraded version (we were on 4.4.2) and noticed that support for hammer.js was removed and the thumbnailWidth=autoUpScale option was depreciated... After upgrading everything to 5.0.3 recently (was forced too because of the JQUERY error) our thumbnails are no longer scaling to 300 width x 200 height, even if I set the width/height, it defaults to 200px x 200px no matter what. I searched the CSS & went through everything multiple times, am I missing something or has this gone unreported till now? Much thanks for your support! Screen shot attached.

While I can view the demonstration.html page when the nanoGallery files are on my PC hard drive using IE9, I cannot view the page or the plugin when the files are located on a SharePoint 2010 server using IE9. However, I can view the demonstration.html page when located on the SharePoint 2010 server using Google Chrome version 34.

Any ideas on why this is happening?

Great product and thanks.

Waldo

I get this error: Object doesn't support property or method 'addEventListener'

Can anyone help on this issue?

Great script/gallery. One problem - I am trying to use the attribute displayBreadcrumb:false with a picasa album but it's not removing the breadcrumb from above the image gallery. Am I missing something or is there an issue?

<script>
    $(document).ready(function () {
        jQuery("#nanoGallery5").nanoGallery({
            thumbnailWidth:50,thumbnailHeight:50,
            //thumbnailWidth:144,thumbnailHeight:144,
            userID:'[email protected]',
            kind:'picasa',
            displayBreadcrumb:false,
            blackList:'Scrapbook|forhomepage|profil',
            maxItemsPerLine:3,
            paginationMaxLinesPerPage:2,
            thumbnailLabel:{display:false},
            thumbnailHoverEffect:'imageOpacity50',
            colorScheme:'light',
            //thumbnailHoverEffect:'slideUp,labelSlideUp,borderLighter'
    //maxWidth:942
        });
    });
</script>   

Rotating a device while in slideshow mode does not cause a re-layout; image and controls are off-screen. Is onorientationchange event handled?

Hi Christopher,

Could be possible use different height images in order to create a nice effect like this one? Not sure if only Masonry.js is needed or anything else but having this responsive, touchable, cross-browsed and awesome gallery could deserve some nicer styling.

Hope could be possible. :)

Regards,
angeldav.

Loaded into our RequireJS app., the gallery causes a network 404 error trying to load http://localhost/javascripts/ngeventEmitter/ngEventEmitter.js".

The AMD loading in jquery.nanogallery.js requires 'ngeventEmitter/ngEventEmitter' but elsewhere in the file the dependency is defined as 'ngEventEmitter/ngEventEmitter' (notice the upper case 'E' as the 3rd character).

My work-around is to add a mapping to my requirejs config:

map: {
  '*': {
    'ngeventEmitter/ngEventEmitter': 'ngEventEmitter/ngEventEmitter'
  }
}

Add the possibility to recognize swipe gestures for mobile platforms.

It would be great an option to order for date / name asc/desc !
However thank you for this great plugin ;-)

New idea/feature: Upload photo form.
Link available "Submit photo" which allows uploading a photo in a specific folder.

With this function available, the gallery can be used as a "photo contest" script: participants submitting photos, visitors give rating, each folder a contest, photos sorted by rating.

Should be '%filenameNoExt' :) Seems like the typo is displayed everywhere (new comments, new string list on site, etc.).

Is there an example of implementing sub galleries? I an only find single gallery examples and there is nothing in the documentation as to how to set these up as far as ID and albumID.

v4.1.0 is available:

https://github.com/Kris-B/nanoGALLERY/releases/tag/4.1.0

(This issue is solely to trigger email notification when a new release is published. I'll leave a comment here when new versions are available.)

Hi,

If you create a nanogallery of one album with ID 1, there is a trouble in the numbering: http://jsfiddle.net/qzmFz/ (if you click on the album and the first photo, the counter will be 1/3, right arrow, it is always 1/3, right arrow again, 2/3).

The workaround is to set an ID for each photo (http://jsfiddle.net/DBYKM/) but it will modify the location hash, or set a large number album ID (http://jsfiddle.net/YQ9tA/).

Regards.

Hi, I'm getting the following error on my site: http://ospreymotorcars.com/
This was happening intermittently yesterday, now always.

nanoGALLERY: Could not retrieve Picasa/Google+ data (jQuery): parsererror, Error: jQuery21005761078863870353_1409061506609 was not called

On a PC you can hover with the mouse over the thumbnail to see the description, and then after just one click on the thumbnail the large image is shown.

But I have just tested my new website using nanoGallery (and also tested it on the nanoGallery website with all samples) on my Samsung Galaxy Tab tablet and my Samsung S4 mobile phone.
And it is not very obvious that you have to tap twice on a thumbnail to see the larger image. After the first tap the description is shown (like the mouse hover), and only after the second tap the larger image is shown.

Is there some possibility to directly show the large image after the first tap, and thus skip the showing of the hover-info?

Thanks for your reply and keep up the good work on nanoGallery,
Wouter

Hi,

When you use nanogallery with the breadcrumb and the locationHash, the location hash is not refreshed after clicking on a breadcrumb link.

It is due to the callbacks linked to the 'oneFolder'/'separator' divs (functions 'breadcrumbAdd'*). There is a call to the function 'DisplayAlbum' which is not correct. It should be 'DisplayAlbum(sep/cAlbumIdx, true);'

Anyway, very nice and pleasant tool. Great work!

Regards.

Hello,

I'm trying to automate the creation of the HTML page containing a Gallery using a shell script by going through all files in a given directory. I made a lot of progress and it works as expected.

However, some of my pictures and thumbnails are not displayed. I came across the fact that all these items have in common that they contain atleast one of the characters äöüÄÖÜß. Is there anything I can to to make it work without renaming files from ö to oe?

My encoding is: ISO-8859-1:1998 (Latin-1, West Europe)

Kind regards

Jens

If you define thumbnail size (both width and height) in script larger than 149px, thumbnail is suddenly displayed in its native aspect ratio, instead of being cropped and filling the container entirely. Is this intentional, and if so, can I change it, so that bigger thumbnails will still fill their respective containers?

Is there any plan to support user uploaded videos on Flickr?

Hello Kris!

Great work! Thanks for putting your efforts in here.

I just started to expore the features of nanoGALLERY. I have a directory on my webserver and would like to fill the nanoGALLERY image library dynamically from the content of the directory. i can also imaging to have one directory containing the images and a second directory with the thumbnails.

Is there a way to achieve this?

Best regards

Jens

When supplied with an albumSorting option when using Flickr, the plugin breaks with the error:
"Uncaught TypeError: Cannot set property 'photo' of undefined "

This is caused by an unknown property set in jquery.nanogallery.js:1469-1475:

if( typeof g_options.albumSorting !== 'undefined' ) { //GI
  if( g_options.albumSorting == 'random' ) {
    data.photoset.photo=shuffle(data.photosets.photoset);
  }else if( g_options.albumSorting == 'reversed' ) {
    data.photoset.photo=data.photosets.photoset.reverse();
  }
}

Which should be:

if( typeof g_options.albumSorting !== 'undefined' ) { //GI
  if( g_options.albumSorting == 'random' ) {
    data.photosets.photoset=shuffle(data.photosets.photoset);
  }else if( g_options.albumSorting == 'reversed' ) {
     data.photosets.photoset=data.photosets.photoset.reverse();
  }
}

I hope this helps!

paginationMaxLinesPerPage is ignored when setting either thumbnailWidth or thumbnailHeight to auto. In other words, it displays all thumbnails, regardless.

Is this intentional?
When displaying thumbnails as a justified layout, is there no other way of limiting the amount of thumbnails shown (with pagination)?

I Kris, it works great, but not on iOS? ....checkout... www.lochsidehouse.co.uk/gallery.htm

Hello,
I found a strange bug in nanoGallery (lates tversion).

To reproduce it, please do the following:

1. Open any gallery, e.g. this example: http://nanogallery.brisbois.fr/#examples. It must be opened on a mobile phone or open it in chrome with activated mobile emulation (i used iPhone 5).
2. Open a picture
3. Close the picture
4. Swipe a bit up or down (do not scroll with the mouse-wheel, if your using the emulator in chrome. swipe with hold mouse button)
5. Try to open another picture. Nothing will happen

Hello Kris,
I noticed a problem, also visible on "http://nanogallery.brisbois.fr/#features" selecting eg "Justified Layout", in your demo there are so many images so initially block scroll regularly.

Then, when I click on a photo, she zooms in, then I close, at this point I can no longer scroll the view.
This is a problem if the gallery contains many photos, to "unlock" it is necessary to reload the page.

Looking at the error console on Chrome or Firefox, I noticed an object "undefined", I am attaching a screenshot.

Thanks.

I would like to set the maximum number of thumbs on a page and add paging to view more.

Hi, when using the thumbnailLabel.title & Google Picasa it displays very long text string which is not the actual file name. I am assuming that this is because of the way Picasa handles the file names when images are uploaded to albums, but I do know the original file names still exist (if you right click on a image and choose "save as" it displays the real file name). Any possible way to get this to work with Picasa?

Can be seen on our newly launched website: http://www.route66marine.com - BTW we just purchased a commercial license from you (From Zeovit USA) for route66marine.com - Good work on this and thanks for the support!

Scott Hasler
Web/Graphics Developer
513-503-9114
[email protected]

Hi,

When you set a callback on the init thumbnail function, there is a ReferenceError to 'elt'. In the function 'thumbnailPositionContent', the code should be 'gO.fnThumbnailInit($elt, item);' instead of 'gO.fnThumbnailInit(elt, item);'

Regards.

Are there options for use in a commercial project or on a commercial site?

Hi, thanks for his work, I wanna know if is possible add share buttons in the photos to flickr use his plugin? thanks :)

my question is if i can just put a limit numer of images from one album with picasa

I'd like to add buttons to rotate the images in the gallery. I'm doing this by modifying the css via jquery for both the image and the thumbnail which works fine. However, the css changes I make don't persist. Is there a better approach to add rotation or is there some way to have the css changes stick?

I'm making a call similar to this to do the rotation:
$('img.image.imgCurrent').css('transform','rotate(' + angle + 'deg)');

When I include a Bootstrap 3 modal on a page with nanogallery, the "set z-index to display 2 elements on top of all others" function allows thumbs to show thru the modal (usually after hover). Any workaround for this?

Hi Kris thanks for the super app. I'm having trouble integrating your plugin with Flickr. No errors, but has extra Container at the bottom and only display three of all . Here is the url of the gallery page:http://www.rotary3500.org.tw/activity.php?type=2, I use Flickr.Can you have a look and see what I am doing wrong? THX~

New idea/feature: can you integrate rating for photos? (like jRating)

Hey!
In version 5.0.1, if I use

colorScheme: 'light',

and labelAppear or labelOpacity50 hover effect, the label container is not hidden in the initial state (tested in Chrome and Firefox).
Here's the fiddle:
http://jsfiddle.net/mooncat/jrpc4kpo/

I noticed it had something to do with the !important property on its initial background, but I'm not sure about the proper way to fix that.

Hello, congratulations for the work, this plugin is fantastic.
I have a problem, a list of all some work, but when I want to select some (albumList) shows nothing ... can you help me? See my code:

     $ (document) .ready (function () {
       $ ("# nanoGallery"). nanoGallery ({
         kind: 'picasa'
         userID: '112432773107874438277'
         thumbnailWidth: 130
  thumbnailHeight: 130
         thumbnailHoverEffect 'scale120'
         albumList: '6005309709802843601 | 6040802709900970913'

the other forms work just right, only albumList that will not work = /

Thumbnails are ok, but images cannot be displayed.

I had an issue when trying to run nanoGALLERY over Zorb Foundation framework. When gallery was loaded, clicking on links on that page did nothing. I've created thread at StackOverflow where we came to solution, it was one of the event.preventDefault() elements in "jquery.nanogallery.js" that did this. Here is link to that question and comments:
http://stackoverflow.com/questions/22200298/running-jquery-gallery-makes-links-unclickable

Commenting out the lines with event.preventDefault() did the job, but I don't feel like it is the right solution.

Hi Developers!

First, thanks a lot for your effort, this really is a nice photo gallery.

Unfortunately, in Mozilla/Firefox (in Chrome everything runs correctly), when I initiate the slide animation going forward/backward, the slide animation starts at a misplaced position, i.e. a bit to the right and then slides away to the left when going forward. Somehow the image seems to be misplaced.

Do you already know this issue? Can you estimate what the error might cause? And: Is it fixable soon? :)

Thanks a lot!

Best regards
Sören Jentzsch

When clicking on a Flickr album image only a small white square is displayed, there is no photo in the lightbox. For Picasa albums the lightbox works ok.

There are no images displayed for my Flickr userID even though I have several images in my photostream. I also found another userID which also does not display any images. There are no error messages.

I try to create a Bootstrap 3 collapse panel (accordion), with in each panel a nanoGallery.
In the first panel, that is open direct after the page is loaded, the thumbs are visible.

But when I click on a panel heading to open another panel (and thus collapse the first panel), the thumbs in the newly opened panel are not visible. Only when I press F12 (so the browser viewport is resized) then the thumbs become visible.

I also tried to copy the nanoGallery generated HTML for the thumbs into one new panel, and then the thumbs are shown when I open this panel. So it seems to be some javascript (timing) related issue?!

I have tested this in Chrome 32 and FF 26 and IE 11.