Nanogallery2 : Images are not re centered when zooming out

I use “nanogalery2” on my website. After zooming in (and eventually paning the image or not), the image is not re centered when zooming out. So, when zooming out, image may disappear.

I would like the image would be re centered when zooming out. Can anyone help me find a solution to solve that ?

You can see the issue with any demo on the owner website: =>

I have created a codepen that reproduce the problem with the original code in order to test solutions:

  nanogallery2 - configure the lightbox toolbars (HTML markup method)
  <a href="" target="_blank">[more...]</a>
<div id="nanogallery2"
    // gallery configuration
    data-nanogallery2 = '{ 
      "itemsBaseURL":     "", 
      "viewerToolbar":    {
             "standard":  "minimizeButton, label, shareButton, fullscreenButton",
             "minimized": "minimizeButton, label, fullscreenButton, downloadButton, infoButton" },
       "viewerTools":      {
             "topLeft":   "label",
             "topRight":  "playPauseButton, zoomButton, fullscreenButton, closeButton" }   
  <!-- content of the gallery -->
  <a href="berlin1.jpg" data-ngthumb="berlin1t.jpg">Berlin 1</a>
  <a href="berlin2.jpg" data-ngthumb="berlin2t.jpg">Berlin 2</a>
  <a href="berlin3.jpg" data-ngthumb="berlin3t.jpg">Berlin 3</a>

You can see the behavior I need here ( image centered when zooming out) here (click on “Active the fullscreen Slideshow”


Thank you for posting in the Zoom Developer Forum. Based on the example, it doesn’t look like you are using one of Zoom’s developers’ products. For help with the issues you’re facing, you may consider posting this question on Stack Overflow or the nanogalery2 Forum. This forum is for Zoom Developer product support.