javascript - nanogallery2 how to Open the popup slider images directly after clicking on album thumbnail?

Question

I am using nanogalley2 to show album galley on a web page. My question is How to Open the popup slider images directly after clicking on album thumbnail without moving to the second step which shows the album images themselves?

the script currently working in this way: step 1- click on the album thumbnail. step 2- show the album's images with back button and this button named with the album name. step 3- after clicking on any image of the select album the slider images popup will shown.

What I need is to move to third step directly after clicking on the album thumbnail in the first step, which includes opening the slider images popup directly.

jQuery(document).ready(function () {
                                      jQuery("#my_nanogallery2").nanogallery2({
                                            
                                          items:[
                                          // album 1
                                            {
                                                src:   'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',             // image url
                                                srct:  'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',         // thumbnail url
                                                title: 'Project Name', // item title
                                                
                                              ID: 1,                       // item ID
                                              kind: 'album',               // item kind
                                                },
                                          
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'Video Title', ID: 10, albumID: 1},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 11, albumID: 1},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 12, albumID: 1},
                                             
                                          // album 2
                                          { 
                                                src:   'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',             // image url
                                                srct:  'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',         // thumbnail url
                                                title: 'Project Name',   // item title
                  
                                                ID: 2,
                                                kind: 'album'
                                          },
                                          {
                                                 src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'Video Title', ID: 20, albumID: 2},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 21, albumID: 2},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 22, albumID: 2},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 23, albumID: 2},
                                          
                                          // album 3
                                          {
                                                src:   'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',             // image url
                                                srct:  'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg',         // thumbnail url
                                                title: 'Project Name',   // item title
                                              ID: 3,                       // item ID
                                              kind: 'album'                // item kind
                                                },
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'Video Title', ID: 30, albumID: 3},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 31, albumID: 3},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 32, albumID: 3},
                                                { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', srct: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg', title: 'image Title', ID: 33, albumID: 3},
                                    
                                            ],

                                          thumbnailWidth:  'auto',
                                          thumbnailHeight: 170,
                                          itemsBaseURL:    'https://nanogallery2.nanostudio.org/samples/',
                                          thumbnailHoverEffect2: null,
                                          locationHash:    false,
                                            
                                      });
                                    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js"></script>
    
<div id="my_nanogallery2"></div>

question from:https://stackoverflow.com/questions/65853795/nanogallery2-how-to-open-the-popup-slider-images-directly-after-clicking-on-albu

Answer 1

For this, you can use the option thumbnailAlbumDisplayImage.
Simply set it to true.

This option is no more described in the library's documentation (maybe a bad manipulation): this has been fixed.