Log inRegister

Boossy

You are here: Boossy » WebDesign » WdWebsites » 0-10-CloudPhotosEmbedCode » 0-17-CPGallery-Nanogallery2

Nanogallery2

04 June 2026 - 11:14 | Version 3 |

installatie, configuratie, authorizatie en probatie!

1 INSTALLATION

2 CONFIGURATION

  • Set client ID & secret in admin/config.php

3 USER AUTHORIZATION

  • Browse to http(s)://your-web-server/nanogp2/authorize.php
  • Choose an account: kmr@boossy.be
  • Grant your-web-server permission: View your Google Photos library: Allow
  • Confirm your choices: Allow
  • Confirmation: {"nano_status":"ok","nano_message":"Authorisation successfully granted (userID=012345678910111213141)."}

4 TEST - separate html file

Create a fotoarchief.html file containing all your albums: 

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Blablabla | fotoarchief</h1>
    <div id="nanogallery2" data-nanogallery2='{
      "kind": "google2",
      "userID": "012345678910111213141",
      "google2URL": "http://your-web-site/nanogp2/nanogp2.php",
      "thumbnailHeight": 320, 
      "thumbnailWidth": "auto",
      "viewerZoom": false
      }' style="height: 100%; overflow: scroll;">
    </div>
  </body>
</html>

Variable data are:
- title (h1)
- userID
- google2URL

Then try to reach http://your-web-site/fotoarchief.html

5 EMBEDDING IN DRUPAL 7.x

5.1 using cdn (unpkg.com)

Delete all enters in the
tag, and you get the code you can enter directly in Drupal:

or even more refined: 
<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
<div id="nanogallery2" data-nanogallery2='{ "kind": "google2", "userID": "your-user-id", "google2URL": "http://your-site.ext/nanogp2/nanogp2.php", "thumbnailHeight": 320, "thumbnailWidth": "auto", "thumbnailBorderVertical": 0, "thumbnailBorderHorizontal": 0, "galleryDisplayTransition": "slideUp", "galleryDisplayTransitionDuration": 500, "thumbnailDisplayTransition": "scaleUp", "thumbnailDisplayTransitionDuration": 500, "thumbnailDisplayInterval": 30, "thumbnailHoverEffect2": "ImageScale150|toolsAppear", "thumbnailIcon": "default", "slideshowDelay": 7000, "thumbnailAlignment": "center", "viewerTools": { "topLeft": "", "topRight": "shareButton, fullscreenButton, closeButton" }, "viewerToolbar": { "standard": "pageCounter, playPauseButton", "minimized": "" }, "viewerZoom": false }'></div>
  • change: your-user-id, your-site.ext
  • Avoid thumbnailHoverEffect2 toolsSlideUp, use toolsAppear instead - dan verschijnt het aantal foto's van een album alleen als je erover hovert
  • "viewerZoom": false zorgt voor webvriendelijke foto's, ze worden dan niet als 100% file size gedownload!
Embedden in Drupal 7.x zorgt ook voor enkele opmaakwijzigingen: volgende CSS-injector voor de betreffende pagina zorgt ervoor dat alles er weer netjes uitziet: aantal foto's en albumlabel niet te ver van de rand, geen achtergrond voor het aantal foto's en voor het albumlabel: 
#main #content .node .field-name-body ul {
 margin-top: 0px;
 padding-right: 5px;
}
#main #content .node .field-name-body ul li:before {
 background-color: transparent;
}
.nGY2 .nGY2GThumbnailLabel {
 background: transparent!Important;
 padding-bottom: 0px!Important;
 margin-bottom: -5px!Important;
}

5.2 using personalized .js / .css files

  • vereist opsplitsing van de klasse .oneItem in .oneItem & .oneItemNoLink in de jquery.nanogallery2(.min).js
  • de cursor wordt voor de breadcrumb ingesteld op 'default' (.css)
  • en specifiek voor .oneItem opnieuw op 'pointer'
  • bij .oneItemNoLink wordt bovendien gezorgd dat er effectief ook geen muisactie mogelijk is (pointer-events: none)
De ~.min.js & ~.min.css van deze versie staan bij de VM-site als ~.generic.min.js resp. ~.generic.min.css.
5.2.2 /!Importants verwijderen uit CSS-injector van Drupal

Welke Importants zijn er:
  • doorzichtig albumlabel met specifieke padding / margin
  • specifieke terugwijspijl met tekst 'Alle albums' in breadcrumb (css entities)
  • specifieke pijl vorige / volgende foto (css entities)
  • specifieke achtergrondkleur breadcrumb (VM-bordeaux)

6 EMBEDDING IN JOOMLA 3.x

It's possible to use the same code as above for Drupal to embed a nanogallery2 in your Joomla website, however:
  • it works fine on my OnePage sites on the main page
  • it doesn't work in the modal windows (Archief), in no nanogallery2 is present on the main window - and if it is present, the modal one is slower...

7 PHP's

  • In the nanogp2 main directory
    • authorize.php: authorizes your nanogp2 or shows the authorization parameters (afterwards)
    • check.php: installation check: php version, free disk space, …
    • nanogp2.php
    • README.md
  • In the admin subdirectory:
    • config.php: contains the configuration settings (client id & secret, and albums to be excluded - be aware that this is the only way to protect your privacy!!!)
    • tools.php
  • In the admin/users/ subdirectory:
    • profile.txt, token_a.txt & token_r.txt - present after authorization - NEVER delete them
You only have to authorize on one domain, if you want to use nanogp2 on another domain, add it in the Google Developers Console, but don't try to use the authorize.php file on that 2nd domain, it'll fail. Simply copy the user directory conataining the .txt files to the 2nd domain.

8 GENERATE A LIST OF ALBUMS' NAMES AND IDs

This one is very convenient: 
http(s)://YOUR_WEB_SERVER/nanogp2/nanogp2.php?nguserid=USER_ID&report

The result file can be found in nanogp2/admin/users//google_photos_data.txt.

9 Tools

In the image display / lightbox, you have 3 positions to put tools:
  • viewerTools.topLeft: by default,
  • viewerTools.topRight: by default,
  • viewerToolbar:
    • minimized:
    • standard
The following tools are possible
toolSorted ascending default position my position remark
closeButton => by default, topRight topRight id  
downloadButton =< by default in standard viewerToolbar, maar werkt niet (doet hetzelfde als linkOriginalButton...) standard viewerToolbar x doesn't work correctly
same function as linkOriginalButton
fullscreenButton => by default, topRight, by default in standard viewerToolbar topRight & standard viewerToolbar topRight  
infoButton: by default in standard viewerToolbar standard viewerToolbar x  
linkOriginalButton: by default in standard viewerToolbar standard viewerToolbar id  
pageCounter => by default topLeft id  
playPauseButton => by default, topLeft topLeft id  
previousButton, nextButton => by default, not in one of the three positions, but center left & center right center left & center right id  
rotateLeft, rotateRight => by default, topRight (remove!) topRight x  
shareButton: by default in standard viewerToolbar standard viewerToolbar id  
zoomButton: by default in standard viewerToolbar standard viewerToolbar x  
customN      
label (image title & description) x id  

algemeen

nanogallery2, all albums, height 568

nanogallery2, one album

nanogallery2, one photo

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback