Cannot get pagination to work

intranets-talk commented 2 years ago

Issue
Pagination does not seem to work, not even using the visual builder located at https://nanogallery2.nanostudio.org/builder.html Obviously, I've search the Issues section, I cannot see any previous similar reports. Is anyone using pagination successfully ?

When pagination is set ("rectangles", as an example, but this seem to apply to "dots" too), clicking the Forward/Back buttons, does nothing (expecting to move through pages, as set in "galleryMaxItems").

Code
Current setup is (but tried variations):

    <div ID="ngy2p" data-nanogallery2='{
        "itemsBaseURL": "https://photos.lan/",
        "thumbnailWidth": "auto",
        "thumbnailBorderVertical": 0,
        "thumbnailBorderHorizontal": 0,
        "colorScheme": {
          "thumbnail": {
            "background": "rgba(255,255,255,1)"
          }
        },
        "thumbnailLabel": {
          "position": "overImageOnBottom"
        },
        "thumbnailHoverEffect2": "labelSlideUpTop",
        "galleryDisplayMode": "pagination",
        "galleryMaxRows": 12,
        "thumbnailAlignment": "center",
        "galleryMaxItems": 6,
        "thumbnailGutterWidth": 10,
        "thumbnailOpenImage": true
      }'>

URL
https://nanogallery2.nanostudio.org/builder.html

Kris-B commented 2 years ago

Please provide your full settings with the correct data source and all images to help reproduce your issue.

intranets-talk commented 2 years ago

Thanks. My data source consists of self-hosted media. All works fine, except pagination (photos, videos, thumbnails are showing and playing fine). Trying to get pagination working because I have a large number of items. This is the whole markup, fairly simple stuff:

<head>
   <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/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>
</head>

<div ID="ngy2p" data-nanogallery2='{
    "itemsBaseURL": "https://photos.lan/",
    "thumbnailWidth": "auto",
    "thumbnailBorderVertical": 0,
    "thumbnailBorderHorizontal": 0,
    "colorScheme": {
      "thumbnail": {
        "background": "rgba(255,255,255,1)"
      }
    },
    "thumbnailLabel": {
      "position": "overImageOnBottom"
    },
    "thumbnailHoverEffect2": "labelSlideUpTop",
    "galleryDisplayMode": "pagination",
    "galleryMaxRows": 10,
    "thumbnailAlignment": "center",
    "galleryMaxItems": 16,
    "thumbnailGutterWidth": 10,
    "thumbnailOpenImage": true
  }'>

  @foreach ($allMedia as $media)

    @if ($media['type'] == 'photo')

        <a href="/photo/{{ $media['name'] }}?p=medium" data-ngthumb="/photo/{{ $media['name'] }}?p=small" data-ngdesc="{{ $media['name'] }}">{{ $media['name'] }}</a>

    @elseif ($media['type'] == 'video')

        <a href="/video/play/{{ $media['name'] }}" data-ngthumb="/video/thumb/{{ $media['basename'] . '.png' }}?p=small" data-ngdesc="{{ $media['name'] }}">{{ $media['name'] }}</a>

    @endif

  @endforeach
</div>

Also, I don't see it working on the builder page either https://nanogallery2.nanostudio.org/builder.html

nanostudio-org / nanogallery2

Cannot get pagination to work #372