Infinitescroll

[raxan]

hi can you show an example with infinitescroll plugin: https://github.com/paulirish/infinite-scroll

thanks!!

[Kris-B]

Hi! This is out of scope of this projet. You can build a jsfiddle or codepen and if you have difficulties I may support you.

[raxan]

Hi, thanks for your reply.

I was able to integrate infinitescroll into my page.

And infininitescroll attach correctly new image.

however, when added new image, I need to "reload" the gallery.

I checked into API, and I don't find anything about.

There is a way for reload gallery?

How much images can handle the script into the same page?

Thanks for this great script, buying soon commercial license :)

[raxan]

An example of code can be:

// Infinitescroll
  $('#galleryWrapper').infinitescroll({
      loading: {
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        img: '',
        msgText: 'Loading',
        speed: 'fast'
      },
      debug: true,
      nextSelector: "ul.pagination li:nth-child(3) a",
      navSelector: "ul.pagination",
      itemSelector: "a"
      animate: true,
      bufferPx: 500,
      pixelsFromNavToBottom: 1000,
      extraScrollPx: 0,
      //path: undefined, // Either parts of a URL as an array (e.g. ["/page/", "/"] or a function that takes in the page number and returns a URL
      //prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
      //maxPage: undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
    },
    function(newElements) {

      var $newElems = $(newElements);
        // Now here should be called api to append new items
        // $('#galleryWrapper') APPEND $($newElems)

    });

Where there is comment: // Now here should be called api to append new items // $('#galleryWrapper') APPEND $($newElems)

should be replaced with your gallery API.

Thansk!!

[raxan]

I have this solution below, but leave a space between each page section, check screenshot on bottom.

$(function () {
  // nanoGallery
  initNanoGallery();

  // Infinitescroll
  $('#galleryWrapper').infinitescroll({
      loading: {
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        img: '',
        msgText: 'Loading',
        speed: 'fast'
      },
      debug: true,
      nextSelector: "ul.pagination li:nth-child(3) a",
      navSelector: "ul.pagination",
      itemSelector: "a",
      animate: true,
      bufferPx: 500,
      pixelsFromNavToBottom: 1000,
      extraScrollPx: 0,
      //path: undefined, // Either parts of a URL as an array (e.g. ["/page/", "/"] or a function that takes in the page number and returns a URL
      //prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
      //maxPage: undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
    },

    // call Isotope as a callback
    function(newElements) {

      initNanoGallery();

    });

});

// nanoGallery
function initNanoGallery()
{
  $("#galleryWrapper").nanoGallery({
    thumbnailWidth: 280,
    thumbnailHeight: 'auto',
    thumbnailGutterWidth: 10,
    thumbnailGutterHeight: 10,
    thumbnailLazyLoad : true,
    thumbnailHoverEffect: 'labelAppear75,imageScale150',
    maxItemsPerLine: 4,
    thumbnailLabel:{
      display: true,
      titleMaxLength: 40,
      align: 'center'
    },
    theme: 'light',
    touchAnimation: false
  });
}

[Kris-B]

Hi, There's no max number of images supported, it's only limited by the browser speed. Did you check the space between each page section with your browser's debugger?

[raxan]

hi,

yes I check the space with firebug, the html code have something messed into main wrapper.

I think that is caused by second call of function that initNanoGallery, as you can see its called after new elements is appended to main wrapper by infinitescroll, here:

 function(newElements) {

      initNanoGallery(); // here is re-call again the init gallery 

    });

1) first time page render the html is

<div id="wraper">
<a href="img1.jpg"></a>
<a href="img2.jpg"></a>
...
</div>

2) Then nanoGallery plugin transform DOM using html attribute data-

3) When user scroll down, new items is appended to wrapper, so we have this structure BEFORE calling again initNanoGallery

<div id="wraper">
<!-- transformed DOM by nanoGallery -->
<div style="opacity: 1; overflow: hidden; top: 0px; left: 0px; width: 270px; height: 239.143px;" class="nanoGalleryThumbnailContainer" draggable="true" unselectable="off"><div style="display: block; width: 270px; height: 239.143px;" class="subcontainer" draggable="true" unselectable="off"><div style="width: 270px; height: 239.143px;" class="imgContainer" draggable="true" unselectable="off"><img style="max-width: 270px; transform: translateX(0px) translateY(0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);" alt=" " src="img.jpg" class="image" draggable="true" unselectable="off"></div><div style="width: 270px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(34, 34, 34, 0);" class="labelImage" draggable="true" unselectable="off"><div class="labelImageTitle labelTitle" style="opacity: 0;" draggable="true" unselectable="off">
        Depositphotos_10880045_XL - Co....</div><div class="labelDescription" style="opacity: 0;" draggable="true" unselectable="off"></div></div></div></div>

<!-- New element -->
<a href="img1.jpg"></a>
<a href="img2.jpg"></a>
...
</div>

The html structure should be again only A element before instance plugin?

I think that if we can in some way destroy (restore dom) and then recall initNanoPLugin.

[Kris-B]

This kind of usage is not supported by this plugin. The plugin will only render the gallery once. After that, if you add some images, they will be ignored.

[raxan]

Shame :(

[Kris-B]

Well, this didn't motivate me to implement it.

[raxan]

why not ? I think that is important to handle large photos database, so you can attach via ajax new photos.

YOu can implement this also for your albums.

Instaed of load all photos, you can load only photo of albumbs via ajax, and add automatically pagination on it.

can you as custom work?