Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

Hi all,

I've been playing around with the awesome Infinite Scroll jQuery plugin to get it to work with Ning 3.0 photos.

Tested on V1 Aloe theme and V2 Infinity theme

What does this tip do? Instead of seeing the pagination buttons at the bottom of your photos page, you'll instead get the next page of photos automatically loading below those already there.

Here's what you need to do:

1) Load the jquery.infinitescroll.min.js on your site by adding the following code to Social Site Manager > Custom Code > End of Page code

<script type="text/javascript" src="https://storage.ning.com/topology/rest/1.0/file/get/956929?profile=original"></script>

2) Go to Social Site Manager > Sites & Pages and select your Photo content instance. Open the Below Header HTML box and insert the following code, depending on which Design Studio theme version you're using:

Click to Enlarge

VERSION 1 Theme

<script type="text/javascript">
xg.addOnRequire(function () {
x$(document).ready(function() {

x$('.matrix .row .span:has(.matrix-itemFrame)').addClass('photoListPage-entry');

var curPage = 1;
var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text();   // Number of pages

x$('.photoListPage .matrix .row').infinitescroll({

navSelector  : ".pagination",            
// selector for the paged navigation (it will be hidden)

nextSelector : ".pagination-next",    
// selector for the NEXT link (to page 2)

itemSelector : ".matrix .row .span",          
// selector for all items you'll retrieve

loading: {
img: "https://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",
msgText: "Loading more photos ..."
},

},function() {  // Optional callback when new content is successfully loaded

curPage++;

if(curPage == pagesNum) {

x$(window).unbind('.infscr');

} else {}

});
});
});
</script>

VERSION 2 theme

<script type="text/javascript">
xg.addOnRequire(function () {
x$(document).ready(function() {

var curPage = 1;
var pagesNum = x$(".pagination").find(".pagination-number.pagination-last").text();   // Number of pages

x$('.grid-frame.sheet ul.matrix.row').infinitescroll({

navSelector  : ".pagination",            
// selector for the paged navigation (it will be hidden)

nextSelector : ".pagination-next",    
// selector for the NEXT link (to page 2)

itemSelector : ".photoListPage-entry",          
// selector for all items you'll retrieve

loading: {
img: "https://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",
msgText: "Loading more photos ..."
},

},function() {  // Optional callback when new content is successfully loaded

curPage++;

if(curPage == pagesNum) {

x$(window).unbind('.infscr');

} else {}

});
});
});
</script>

3) Now add this css in the Design Studio Custom CSS (this positions the loading gif) - both V1 and V2 of Design studio:

#infscr-loading {
    margin: 20px;
    text-align: center;
}

See it in action here (on my messy sandbox site - sorry!)

Enjoy

SP


Notes:

i) The method i've used here adds script to the 'Below Header Ad' box in order to get round the fact that photo pages no longer have a standard Body class css selector (i.e. it's determined by your page name). I wanted this to work for everyone. However, you can include the script in the End of Page code by targeting the photo page specific body class selectors should you wish to avoid adding it in the below header ad box.

ii) The documentation on the Infinite Scroll jQuery plugin site is patchy to say the least. Much of it is outdated.

iii) You can change the loading gif image and the text that accompanies it by altering the following code as it appears above:

loading: {
img: "https://storage.ning.com/topology/rest/1.0/file/get/557270?profile=original",
msgText: "Loading more photos ..."
}

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

        • Thank you both, I had a feeling that would be the answer. OK here is a puzzle then...

          HAVE:

          1 PHOTO Module on the site.

          NEED:

          1 PHOTO landing page without module title visible etc, a clean welcome to the site focusing eyes on Featured photos and with infinite scroll...

          1 PHOTO page that is normal where the user can click featured or not featured and it shows the module title at the top

          HOW?:

          ...

          • only way i can possibly think of is

            create a photo page

            masrk it as home page

            2 colum layout photos in large column w inf scroll

            welcome message in small column

            now when you feature a photo.. save it upload it to this new page wich only alows admin uploads.. problem here is that if u alow commenting the coments will be seperate from the ones on the reg featured pagesd

            but since u cant mark the featured photos themselves as the home page this is the only option that i can think of

            ..its possible u maybe able to figure out an iframne oiption im not sure if that will work tho

            but ive been puzzling over your situation since ui mentioned it (while doing 10 other things) and thats about all i can think of

  • OK gentleman, I have a riddle....

    We have the code currently on our sandbox site, we have pages and pages, hundreds of them for Featured Photos... however the script "reaches the end" after just a few pages, help?

    http://pinuplifestyle3.ning.com/photo/list/featured

    • Also can I have it open a click of an image in a new tab? The logic behind this is that when a user clicks BACK it doesn't take them where the scrolling left off, it goes to the very top again.

      • i removed it for 2 reasons 1 often it wouldnt scroll till i scrolled way beyond where it should and 2 often u might want to look for a specific pic that u knows on page  3 or 4  or 30 or 40  so the pagination helps u find things

  • Can we have it open clicked images in a new tab? The logic behind this is that when a user clicks BACK it doesn't take them where the scrolling left off, it goes to the very top again.

  • Thanks for the code! The version2 theme worked in my Ning 3 network for photos and videos modules. I tried in groups module but it didn't work, is there a code to work in groups module (list of groups)?

  • I found out for groups! Groups are loading automaticatlly on scroll!

    In itemSelector you need to change the class:

    itemSelector : ".groupHub-group",
    // selector for all items you'll retrieve

     

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Steve C 
here's the discussion"
2 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
2 hours ago
Steve C replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Thank you!
 "
3 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"you are welcome"
3 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"the discussion is public, when I'm at the computer I look for it for you"
3 hours ago
Steve C replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"Thanks! Do you know what it's called? I searched around and couldn't find it. Some tips require…"
4 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"your problem is the hidden bar, i no longer have a 3.0 and i can't test the codes but if they don't…"
6 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Anam 
put this code if it's a 3.0"
10 hours ago
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
".SP_sign_up{text-align:center;background:#fff;border-radius:3px;-webkit-border-radius:3px;-moz-bord…"
10 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
" This is the content of my Custom CSS box - can any expert see something there that would conflict…"
11 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Yes, we need light. I see Rosas has got them working but they do not work for me. Must be some CSS…"
11 hours ago
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"your answer can be found herehttp://jensocial.com/"
12 hours ago
More…

Meanwhile, you can check our social media channels