v5.4.0

.gitignore

@@ -0,0 +1 @@
+node_modules

Gruntfile.js

@@ -0,0 +1,38 @@
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    cssmin: {
+      target: {
+        files: {
+          'dist/css/nanogallery.min.css': 'css/nanogallery.css',
+          'dist/css/nanogallery.woff.min.css': 'css/nanogallery.woff.css',
+          'dist/css/themes/clean/nanogallery_clean.min.css': 'css/themes/clean/nanogallery_clean.css',
+          'dist/css/themes/clean/nanogallery_clean.woff.min.css': 'css/themes/clean/nanogallery_clean.woff.css',
+          'dist/css/themes/light/nanogallery_light.min.css': 'css/themes/light/nanogallery_light.css',
+          'dist/css/themes/light/nanogallery_light.woff.min.css': 'css/themes/light/nanogallery_light.woff.css'
+        }
+      }
+    },
+    uglify: {
+      options: {
+        //banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
+        preserveComments: 'some'
+      },
+      build: {
+        src: 'jquery.<%= pkg.name %>.js',
+        dest: 'dist/jquery.<%= pkg.name %>.min.js'
+      }
+    }
+  });
+
+  // Load the plugin that provides the "uglify" task.
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+  // Default task(s).
+  grunt.registerTask('default', ['uglify','cssmin']);
+
+};

bower.json

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

changelog.md

@@ -4,6 +4,60 @@ nanoGALLERY - jQuery plugin
 ChangeLog
 ------
 
+v5.4.0
+------
+
+##### New features
+- Pagination with dots (additionally to page numbers)
+- Settings specific to first navigation level: extended to thumbnailL1Label (#53), thumbnailL1HoverEffect , touchAnimationL1
+- Responsive image sizes now supported by API and inline methods
+- Better support of custom HTML elements in thumbnails
+- Selectable thumbnails (beta)
+- New API methods (beta)
+
+##### New options
+- **paginationDots**: display dots for thumbnail pagination  
+  *boolean; Default: false*  
+- **thumbnailL1Label**: set thumbnail's label options for first navigation level  
+- **thumbnailL1HoverEffect**: set thumbnail's hover effects options for first navigation level  
+- **touchAnimationL1**: enable touch animation on first navigation level
+- inline method: new properties to define responsive image sources `data-ngSrcXS`, `data-ngSrcSM`, `data-ngSrcME`, `data-ngSrcLA`, `data-ngSrcXL`  
+- API method: new properties to define responsive image sources: `srcXS`, `srcSM`, `srcME`, `srcLA`, `srcXL`  
+- **breakpointSizeSM**, **breakpointSizeME**, **breakpointSizeLA**, **breakpointSizeXL**: new syntax to define resolution breakpoints  
+- **itemsSelectable**: enable thumbnail selection  
+  *boolean; Default: false*  
+
+##### New callbacks
+- **fnThumbnailClicked($elt, item)**: fired on click/touch event on thumbnail. Open is cancelled if function returns false.  
+- **fnImgDisplayed($elt, item)**: fired after an image is displayed.  
+- **fnThumbnailSelection($elt, item)**: fired when a thumbnail is selected.  
+
+##### New API methods (beta)
+- Reload current album: `$('#yourElement').nanoGallery('reload');`  
+- Get an option: `$('#yourElement').nanoGallery('option', option_name);`  
+- Set an option: `$('#yourElement').nanoGallery('option', option_name, new_value);` (note: only some options are supported)  
+- Get an item: `$('#yourElement').nanoGallery('getItem', item_index);`  
+- Get every items: `$('#yourElement').nanoGallery('getItems');`  
+- Get the indexes of some items: `$('#yourElement').nanoGallery('getItemsIndex', [item1, item2, item3, ...]);`  
+- List selected items: `$('#yourElement').nanoGallery('getSelectedItems');`  
+- Select some items: `$('#yourElement').nanoGallery('selectItems', [item1, item2, item3, ...]);`  
+- Unselect some items: `$('#yourElement').nanoGallery('unselectItems', [item1, item2, item3, ...]);`  
+
+##### Misc
+- Option locationHash: default value changed from false to true
+- Some code redesign
+- bugfix: click/touch handling on custom HTML elements on thumbnails (specify class 'customEventHandler' to force custom click/touch event handling)  
+- bugfix: cascading layout/thumbnails invisible in some cases  
+
+##### Depreciated options
+- `thumbnailSizeSM` -> replaced by `breakpointSizeSM`, but still supported  
+- `thumbnailSizeME` -> replaced by `breakpointSizeME`, but still supported  
+- `thumbnailSizeLA` -> replaced by `breakpointSizeLA`, but still supported  
+- `thumbnailSizeXL` -> replaced by `breakpointSizeXL`, but still supported  
+
+**Many thanks to Raphaël Renaudon (https://github.com/sevarg) for his contribution.**  
+
+
 v5.3.0
 ------
 

css/nanogallery.css

@@ -384,7 +384,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
-
+.nanogallery_theme_default .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 .nanogallery_theme_default .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 	/* no border or padding allowed here */
   box-sizing: content-box;

css/nanogallery.woff.css

@@ -385,6 +385,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
+.nanogallery_theme_default .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 
 .nanogallery_theme_default .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 	/* no border or padding allowed here */

css/themes/clean/nanogallery_clean.css

@@ -304,6 +304,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
+.nanogallery_theme_clean .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 
 .nanogallery_theme_clean .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 /* no border or padding allowed here */

css/themes/clean/nanogallery_clean.woff.css

@@ -305,6 +305,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
+.nanogallery_theme_clean .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 
 .nanogallery_theme_clean .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 /* no border or padding allowed here */

css/themes/light/nanogallery_light.css

@@ -303,6 +303,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
+.nanogallery_theme_light .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 
 .nanogallery_theme_light .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 	/* no border or padding allowed here */

css/themes/light/nanogallery_light.woff.css

@@ -304,6 +304,9 @@
 	-o-box-sizing: content-box;
 	overflow:hidden;
 }
+.nanogallery_theme_light .nanoGalleryContainer  .nanoGalleryThumbnailContainer .selected{
+  opacity: 0.5;
+}
 
 .nanogallery_theme_light .nanoGalleryContainer .nanoGalleryThumbnailContainer .subcontainer{
 	/* no border or padding allowed here */

demonstration.html

@@ -167,9 +167,9 @@
 				{
 					src: 'demonstration/image_01.jpg',		// image url
 					srct: 'demonstration/image_01t.jpg',	// thumbnail url
-					title: 'image 1', 						        // thumbnail title
+					title: '<a href="#">Test</a>image 1', 						        // thumbnail title
 					description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-					title_FR: 'image 1 (fr)',
+					title_FREEEEEEE: 'image 1 (fr)',
 					description_FR : 'description image 1 (fr)'
 				},
 				{
@@ -196,10 +196,11 @@
         theme:'light',
         imageTransition: 'fade' ,
         fnViewerInfo:myViewerInfo,
+        locationHash: false,
         viewerToolbar: { standard:'minimizeButton , previousButton, pageCounter ,nextButton,playPauseButton,fullscreenButton,infoButton,linkOriginalButton,closeButton,label,custom1' },
         fnImgToolbarCustInit: function(elementName) { return('<div>build</div>'); },
         fnImgToolbarCustDisplay: function($elements, item, data) {
-          $elements.eq(0).html('photo ID: '+item.GetID());
+          $elements.eq(0).html('photo ID: '+item.GetID() +'<a href="http://google.fr">Test</a>');
         },
         fnImgToolbarCustClick: function(elementName, $element, item, data) {
           alert(elementName);
@@ -231,6 +232,7 @@
 			jQuery("#nanoGallery1a").nanoGallery({thumbnailWidth:120,thumbnailHeight:120,
 				items:contentGallery1a,
 				theme:'clean',
+        locationHash: false,
 				thumbnailHoverEffect:{'name':'imageFlipHorizontal','duration':500},
 				useTags:false,
         viewerDisplayLogo:false,
@@ -250,6 +252,7 @@
 				itemsBaseURL:'demonstration',
 				thumbnailHoverEffect:[{'name':'scaleLabelOverImage','duration':300},{'name':'borderLighter'}],				
 				colorScheme:'clean',
+        locationHash: false,
 				thumbnailLabel:{display:true,position:'overImageOnTop', align:'center'},
         viewerDisplayLogo:true
 			});
@@ -270,13 +273,16 @@
 				//album: '5851968929721015169&authkey=Gv1sRgCJSlhdKSgoiXtgE',
         //album:'5856259539659194001',
         photoSorting: 'random',
+        locationHash: false,
         albumSorting: 'random',
         colorScheme: myColorScheme,
         galleryFullpageButton: true,
-        thumbnailLabel:{title:'%filenameNoExt', itemsCount:'title'},
+        thumbnailLabel:{ display:false},
+        thumbnailL1Label:{title:'%filenameNoExt', itemsCount:'title', display:true},
         viewerDisplayLogo: true,
         photoSorting: 'titleDesc',
-  			thumbnailHoverEffect:[{'name':'labelOpacity50','duration':300, 'delay':500},{'name':'imageScaleIn80', 'duration':500}]
+  			thumbnailHoverEffect:[{'name':'imageScale150', 'duration':500}],
+  			thumbnailL1HoverEffect:[{'name':'labelOpacity50','duration':300, 'delay':500},{'name':'imageScaleIn80', 'duration':500}]
 				//thumbnailHoverEffect: [{'name':'imageScaleIn80','duration':300},{'name':'borderLighter'}]
 			});
 
@@ -306,6 +312,8 @@
         imageTransition:'slideAppear',
         fnProcessData: fnDemopProcessData,    // javascript custom extension
         fnViewerInfo: fnDemoViewerInfo,      // javascript custom extension
+        fnThumbnailSelection : fnDemoThumbnailSelection,
+        fnThumbnailInit : fnDemoThumbnailInit,
         itemsSelectable:true
 			});
 
@@ -331,10 +339,41 @@
         var s= 'camera: '+item.customData.exif.model + ' / width: '+item.customData.imgOriginalWidth+' / height: '+item.customData.imgOriginalHeight;
         alert(s);
       }
+
+      function fnDemoThumbnailInit( $elt, item ) {
+        // add checkbox over thumbnail
+        thumbnailCheckbox = $('<input>')
+          .attr('type', 'checkbox')
+          .css({
+            'position' : 'absolute',
+            'top' : '15px',
+            'left' : '15px',
+            'opacity' : 0
+          }).click(function(){
+            return false;
+          });
+        $elt.append(thumbnailCheckbox);
+      }
 
+      function fnDemoThumbnailSelection( $elt, item, data ) {
+        var $thumbnailCheckbox = $elt.find('input[type=checkbox]');
+        $thumbnailCheckbox.prop('checked', item.selected);
+        if( item.selected ) {
+          $thumbnailCheckbox.css({'opacity':1});
+          $elt.find('.imgContainer, .labelImage').css({'background':'#069'});
+        }
+        else {
+          $thumbnailCheckbox.css({'opacity':0});
+          $elt.find('.imgContainer, .labelImage').css({'background':'#000'});
+        }
+      }
+
 
       jQuery('#btnReload').on('click', function() {
-        jQuery("#nanoGallery3a").nanoGallery('reload');
+        jQuery('#nanoGallery3a').nanoGallery('reload');
+      });
+      jQuery('#btnCountSelected').on('click', function() {
+        alert(jQuery('#nanoGallery3a').nanoGallery('getSelectedItems').length);
       });
 
       // ##################################################################################################################
@@ -357,6 +396,7 @@
         thumbnailLazyLoad:true,
         theme:'clean',
         colorScheme:'light',
+        locationHash: false,
         level1: { thumbnailWidth: 200, thumbnailHeight: 120 }
 			});
 
@@ -476,7 +516,9 @@
 				useTags:false,
         locationHash:false,
         breadcrumbAutoHideTopLevel:true,
-        maxItemsPerLine:5
+        maxItemsPerLine:5,
+        locationHash: false,
+        paginationDots : true
 			});
 
 
@@ -498,7 +540,7 @@
 
 	<div style="color:#fff;text-align:center;font-size:4.0em;"><span style="color:#fff;">nano</span><span style="color:#6e6;">GALLERY</span></div>
 	<div style="text-align:center;font-size:2em;color:#6e6">jQuery plugin - demonstration page</div>
-	<div style="color:#eee;text-align:center;font-size:.9em;"><br>more about nanoGALLERY for jQuery : <a href="http://www.nanogallery.brisbois.fr">www.nanogallery.brisbois.fr</a></div>
+	<div style="color:#eee;text-align:center;font-size:.9em;"><br>Full nanoGALLERY documentation: <a href="http://www.nanogallery.brisbois.fr">www.nanogallery.brisbois.fr</a></div>
 	<br><br><br><br>
 	<div style="color:#eee;text-align:center;font-size:1.2em;">Look at the page source code to find useful information.</div>
 
@@ -529,7 +571,8 @@ <h2 style="background:#555;">----- Possible image sources -----</h2>
   <br><br><br>
 	<div style="margin:auto;max-width:960px;background:#fff;color:#f00;padding:1px;">
     <div style="margin:10px;">
-      <button id="btnReload" "type="button" style="color:#000;padding:4px;">&nbsp; reload() &nbsp;</button>
+      <button id="btnReload" "type="button" style="color:#000;padding:4px;">&nbsp; reload &nbsp;</button>
+      <button id="btnCountSelected" "type="button" style="color:#000;padding:4px;">&nbsp; count selected items &nbsp;</button>
     </div>
 		<br><br><br>
     <div id="nanoGallery3a"></div>