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

Email me when people reply –

Replies

  • i love u

  • Hello SP. awesome I love it. Any example? running this function?

    • NC for Hire
      Looks like Incontri Rock is here
      http://www.incontrirock.it/foto/Me+stessa+%28F%29

      And I give my example in the post as well.
      • Hello dear SP. Thank u for the example sorrry i dont see urs :) I try this wonderful code on my network but can't open the dashboard control after see all photos. :( i always let open 2 or 3 tabs of my network for precaution when i add new codes. so i put it out just for now. But i really love this one from you.

        • NC for Hire

          very odd. i don't get this error. do you mean the green Ning dashboard buttons in the top left?

          • yes

            • NC for Hire

              not sure why that would be. what theme are you using?

              • Wood Zen theme :)

              • Hi SP. I found why can't open the dashboard that happens just when I open my own profile and then wanna open the dashboard. But when I go to  home page can open it as well. Thank you for let us using this wonderful tip.

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

⚡JFarrow⌁ replied to Bizz's discussion
Tip: Remove crop of group cover photo and set a bigger height while making them responsive
"Wow..  cool idea!   I may try this.     Wonder if the same could be done for the funny crop of memb…"
6 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Adding a plus media button to your activity feed
"Wow... very innovative!"
8 hours ago
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"Great tip!  Works well... just wondering why the little camera icon shows up... gonna have to inves…"
8 hours ago
Fernando Bisbal replied to Fernando Bisbal's discussion
Any trick so that the image of each group is displayed in the google search results?
"exact!! in social networks the same ... it is a horror that the web logo is always shown as an imag…"
8 hours ago
⚡JFarrow⌁ replied to Fernando Bisbal's discussion
Any trick so that the image of each group is displayed in the google search results?
"This is also something i am hoping is coming...  the ability to specify the image which shows up bo…"
8 hours ago
Fernando Bisbal posted a discussion
Any trick so that the image (LOGO) of each group is displayed in the google search results? now all…
9 hours ago
Fernando Bisbal replied to Bizz's discussion
Tip: Remove crop of group cover photo and set a bigger height while making them responsive
"Thank you very much I have applied it to my website and now it is much better"
9 hours ago
Bizz replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"Hmm it should all be working ok as I have added the code to my site to test, here is a link to two…"
9 hours ago
Explore One Vietnam updated their profile
22 hours ago
kostasgr replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"hi Bizz !!  not working ....."
yesterday
Bizz replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"Your welcome Fernando, glad could help
Bizz :-)"
yesterday
Fernando Bisbal replied to ⚡JFarrow⌁'s discussion
Simple Tip N3: How to Move your Group Description/Follow Box
"Thank you very much, I've been waiting for this for a long time ... the result is great ... attache…"
yesterday
More…

Meanwhile, you can check our social media channels