Issue trying to get Unite Gallery working in SharePoint 2016 on-prem using spservices

Question

I keep getting the following error:

jquery-1.12.3.min.js:4 Uncaught TypeError: Cannot read property 'slice' of undefined

here is the code I'm using: (original src at: https://futuretechnologygroup.wordpress.com/2016/01/31/displaying-images-from-a-sharepoint-picture-library-with-unitegallery/ but can't use vti_bin apparently for anonymous users)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-

2014.02.min.js"></script>
 <script type="text/javascript" src="../siteassets/unitegallery/js/unitegallery.min.js"></SCRIPT>
 <script type="text/javascript" src="../siteassets/unitegallery/themes/tiles/ug-theme-tiles.js"></SCRIPT>
 <link rel="stylesheet" href="../siteassets/unitegallery/css/unite-gallery.css" />

<div id="gallery" style="display:none;"></div>

 <script language="javascript" type="text/javascript">

 $(document).ready(function() {
   $().SPServices({
     operation: "GetListItems",
     async: false,
     listName: "Photos",
     CAMLViewFields: "<ViewFields></ViewFields>",
     completefunc: function (xData, Status) {

        $(xData.responseXML).SPFilterNode("z:row").each(function() {
  var Name = $(this).attr("ows_Name"); 
  var Path = '../sites/rodenortonstphilipfed/photos';

    // extract relevant image filename sections
   var ShortName = Name.slice(0,-4);    // image filename without the extension (we need this to build the url to the 

SharePoint-generated thumbnail.
   var ImageExt = Name.substr(Name.length - 3); // image file extension, also used in building thumbnail url. 

   // construct url's to image and thumbnail
   var ImageBig = '' + Path + '/' + Name;  // url to the full image.
   var ImageThumb = '' + Path + '/_w/'  + ShortName + '_' + ImageExt + '.jpg'; // url to image thumbnail.



         var liHtml11 = '<a href="#"><img alt="" src="' + ImageThumb + '" data-image="' + ImageBig + '" 

style="display:none"></a>';  


         $("#gallery").append(liHtml11);
       });
     }
   });
 });
 </script>
 <div id="gallery" ></div>

 <script type="text/javascript">

  jQuery(document).ready(function(){

   jQuery("#gallery").unitegallery();

  });

 </script>

Any help appreciated.

Answer 1

Sample script for your reference(use REST api instead of SPService). ShortName is not correctly slice, correct it if you need it

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>   
    <script type="text/javascript" src="/siteassets/unitegallery/js/unitegallery.min.js"></script>
    <script type="text/javascript" src="/siteassets/unitegallery/themes/tiles/ug-theme-tiles.js"></script>
    <link rel="stylesheet" href="/siteassets/unitegallery/css/unite-gallery.css" />

    <!--<div id="gallery" style="display:none;"></div>-->

    <script language="javascript" type="text/javascript">

        ///_api/web/Lists/getByTitle('Photos')/items?$select=FileRef,FileDirRef,EncodedAbsThumbnailUrl
        $(document).ready(function () {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/getByTitle('Photos')/items?$select=FileRef,FileDirRef,EncodedAbsThumbnailUrl,EncodedAbsUrl",
                type: 'GET',
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose",
                },
                success: function (data, textStatus, jqXHR) {
                    if (data.d.results.length > 0) {
                        results = data.d.results;
                        for (var j = 0; j < results.length; j++) {
                            var Name = data.d.results[j].FileRef;                            

                            // ShortName is not correctly slice, correct it if you need it
                            var ShortName = Name.slice(0, -4);
                            //SharePoint-generated thumbnail.
                            var ImageExt = Name.substr(Name.length - 3);

                            var ImageBig = data.d.results[j].EncodedAbsUrl;
                            var ImageThumb = data.d.results[j].EncodedAbsThumbnailUrl;
                            var liHtml11 = '<a href="#"><img alt="" src="' + ImageThumb + '" data-image="' + ImageBig + '"style="display:none"></a>';
                            $("#gallery").append(liHtml11)
                        }
                    }
                    $("#gallery").unitegallery();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(textStatus);
                }
            })           
        });
    </script>
    <div id="gallery"></div>