v5.8.0

README.md

@@ -5,7 +5,7 @@
 
 Touch enabled, fully responsive, justified/cascading/grid layout and supporting cloud storage.
 
-Featuring multi-level navigation in albums, combinable hover effects on thumbnails, responsive thumbnail sizes, multiple layouts, slideshow, fullscreen, pagination, image lazy load, themes, deep linking, customizable, i18n, and pulling in Flickr, Picasa and Google+ photo albums among others.
+Featuring multi-level navigation in albums, combinable hover effects on thumbnails, responsive thumbnail sizes, multiple layouts, slideshow, fullscreen, pagination, image lazy load, themes, deep linking, customizable, i18n, and pulling in Flickr or Picasa/Google+/Google Photos photo albums among others.
 
 
 #### Usage can be as easy as: 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "nanogallery",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "homepage": "http://nanogallery.brisbois.fr",
   "authors": [
     "Christophe Brisbois"

changelog.md

@@ -4,6 +4,37 @@ nanoGALLERY - jQuery plugin
 ChangeLog 
 ------
 
+v5.8.0
+------
+
+##### New API methods  
+- **closeViewer**: close the image viewer.  
+  `$('#yourElement').nanoGallery('closeViewer');`  
+  (credits: Victor A. Banuelos - https://github.com/vbanuelos)  
+- **paginationPreviousPage**: go to previous gallery page (when in pagination mode).  
+  `$('#yourElement').nanoGallery('paginationPreviousPage');`  
+- **paginationNextPage**: go to next gallery page (when in pagination mode).  
+  `$('#yourElement').nanoGallery('paginationNextPage');`  
+- **paginationCountPages**: returns the number of gallery pages (when in pagination mode).  
+  `var countPages = $('#yourElement').nanoGallery('paginationCountPages');`  
+- **paginationGotoPage**: go to a specific gallery page (when in pagination mode).  
+  `$('#yourElement').nanoGallery('paginationGotoPage', pageNumber);`  
+- **getCurrentViewedItem**: get the currently viewed item. Returns `null` if viewer not displayed.
+  `var item=$('#yourElement').nanoGallery('getCurrentViewedItem');`  
+  (credits: Daniel Eck - https://github.com/Ecksters)  
+- **getCurrentViewedItemIdx**: get the index of the currently viewed image. Returns `-1` if viewer not displayed.
+  `var itemIdx=$('#yourElement').nanoGallery('getCurrentViewedItemIdx');`  
+  (credits: Daniel Eck - https://github.com/Ecksters)  
+
+
+##### Misc
+- Picasa/Google+: now supports more than 1.000 images per album (credits: Giovanni Chiodi).  
+- bugfix: hover animations becoming choppy after navigating fastly in images.  
+- bugfix: loading CSS animation consuming memory even if not visible.  
+- bugfix: issue #78 - NGTweenable undefined when loading in a page using AMD and requirejs (credits: Jeff Mills - https://github.com/jefftmills)  
+
+**Many thanks to Giovanni Chiodi, AlexRed, Jeff Mills, Victor A. Banuelos and Daniel Eck for their contribution.**  
+
 v5.7.0
 ------
 

css/nanogallery.css

@@ -972,14 +972,22 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
-.nanogallery_theme_default .nanoGalleryLBar {
+.nanogallery_theme_default .nanoGalleryLBarOff {
 	position:relative;
   width:100%;
   visibility: hidden;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;
 }
+.nanogallery_theme_default .nanoGalleryLBar {
+	position:relative;
+  width:100%;
+  visibility: visible;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_default .nanoGalleryLBar > div {
 	position:absolute;
 	width:50px;

css/nanogallery.woff.css

@@ -973,14 +973,22 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
-.nanogallery_theme_default .nanoGalleryLBar {
+.nanogallery_theme_default .nanoGalleryLBarOff {
 	position:relative;
   width:100%;
   visibility: hidden;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;
 }
+.nanogallery_theme_default .nanoGalleryLBar {
+	position:relative;
+  width:100%;
+  visibility: visible;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_default .nanoGalleryLBar > div {
 	position:absolute;
 	width:50px;

css/themes/clean/nanogallery_clean.css

@@ -882,14 +882,22 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
-.nanogallery_theme_clean .nanoGalleryLBar {
+.nanogallery_theme_clean .nanoGalleryLBarOff {
 	position:relative;
   width:100%;
   visibility: hidden;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;
 }
+.nanogallery_theme_clean .nanoGalleryLBar {
+	position:relative;
+  width:100%;
+  visibility: visible;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_clean .nanoGalleryLBar > div {
 	position:absolute;
 	width:50px;

css/themes/clean/nanogallery_clean.woff.css

@@ -883,14 +883,22 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
-.nanogallery_theme_clean .nanoGalleryLBar {
+.nanogallery_theme_clean .nanoGalleryLBarOff{
 	position:relative;
   width:100%;
   visibility: hidden;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;
 }
+.nanogallery_theme_clean .nanoGalleryLBar {
+	position:relative;
+  width:100%;
+  visibility: visible;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_clean .nanoGalleryLBar > div {
 	position:absolute;
 	width:50px;

css/themes/light/nanogallery_light.css

@@ -877,10 +877,18 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
+.nanogallery_theme_light .nanoGalleryLBarOff {
+	position:relative;
+  width:100%;
+  visibility: hidden;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_light .nanoGalleryLBar {
 	position:relative;
-  height:1px;
   width:100%;
+  visibility: visible;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;

css/themes/light/nanogallery_light.woff.css

@@ -879,10 +879,18 @@
 /**************************************/
 /* LOADING BAR                        */
 /**************************************/
+.nanogallery_theme_light .nanoGalleryLBarOff {
+	position:relative;
+  width:100%;
+  visibility: hidden;
+  height:2px;
+  margin:0 0 1px 0;
+  background-color:#555;
+}
 .nanogallery_theme_light .nanoGalleryLBar {
 	position:relative;
-  height:1px;
   width:100%;
+  visibility: visible;
   height:2px;
   margin:0 0 1px 0;
   background-color:#555;

demonstration.html

@@ -244,7 +244,6 @@
         colorSchemeViewer:'default'
 			});
 
-//      jQuery("#nanoGallery1a").nanoGallery().test();
 
 
       // ##################################################################################################################
@@ -268,7 +267,10 @@
         thumbnailWidth:'auto', thumbnailHeight:'200 XS80 SM150 LA250 XL290',
 
         userID: '111186676244625461692',
+        //userID: '106423746252799910225',    // RonClifford
+        //userID: '110359559620842741677',    // AlexRed
         //userID:'103482106723589181634', // --> Cyrilic
+
         kind: 'picasa',
         //maxItemsPerLine:3,
         //album: '5851968929721015169?authkey=CJSlhdKSgoiXtgE',
@@ -286,7 +288,6 @@
         thumbnailLabel:{ display:false},
         thumbnailL1Label:{title:'%filenameNoExt', itemsCount:'title', display:true},
         viewerDisplayLogo: true,
-        photoSorting: 'titleDesc',
         thumbnailHoverEffect:[{'name':'imageScale150', 'duration':500}],
         thumbnailL1HoverEffect:[{'name':'labelOpacity50','duration':300, 'delay':500},{'name':'imageScaleIn80', 'duration':500}]
         //thumbnailHoverEffect: [{'name':'imageScaleIn80','duration':300},{'name':'borderLighter'}]
@@ -500,6 +501,18 @@
         itemsBaseURL:'demonstration/'
 			});
 
+      jQuery('#btnPaginationCount').on('click', function() {
+        alert(jQuery('#nanoGalleryMLN').nanoGallery('paginationCountPages'));
+      });
+      jQuery('#btnPaginationNext').on('click', function() {
+        jQuery('#nanoGalleryMLN').nanoGallery('paginationNextPage');
+      });
+      jQuery('#btnPaginationPrevious').on('click', function() {
+        jQuery('#nanoGalleryMLN').nanoGallery('paginationPreviousPage');
+      });
+      jQuery('#btnPaginationGoto').on('click', function() {
+        jQuery('#nanoGalleryMLN').nanoGallery('paginationGotoPage',2);
+      });
 
       // ##################################################################################################################
 			// ##### DEMO PANEL #####
@@ -568,6 +581,12 @@ <h2 style="background:#555;">----- Possible image sources -----</h2>
 
 	<br><br><br><br><br><br><br><br><br>
 	<h2 style="background:#555;">----- Multi-level navigation and pagination (API) -----</h2><br><br>
+    <div style="margin:10px;">
+      <button id="btnPaginationCount" "type="button" style="color:#000;padding:4px;">&nbsp; Pagination - count &nbsp;</button>
+      <button id="btnPaginationNext" "type="button" style="color:#000;padding:4px;">&nbsp; Pagination - next &nbsp;</button>
+      <button id="btnPaginationPrevious" "type="button" style="color:#000;padding:4px;">&nbsp; Pagination - previous &nbsp;</button>
+      <button id="btnPaginationGoto" "type="button" style="color:#000;padding:4px;">&nbsp; Pagination - goto page 2 &nbsp;</button>
+    </div>
 	<div id="nanoGalleryMLN"></div>