Ning 3.0 Slider – Dynamically Loads Blog Posts

Ning has never provided NCs with a quick and easy to install dynamic slider – a Ning slider that pulls in content from certain parts of the site without having to manually edit html each time you wanted to change the slides.

This quick and simple jQuery plugin uses the awesome WooThemes FlexSlider to dynamically load blog posts from a blog instance on a custom page.

It works on a series of assumptions about each blog post:
a) each post has an excerpt.
b) each post has a lead photo.
c) you only have one blog instance on the page we’re targeting.

OK, let’s get this Ning Slider installed!

IMPORTANT: We’ll assume that you already have a blog set up and that you’ve never installed the WooThemes Flexslider before.

1. Open up your Social Site Manager and head to Sites & Pages.

2. On any Custom Page (either a new or one that you already have) add a blog content instance by pressing Add Content and adding an existing blog. Set it up without a Title and with the excerpt set to 250, e.g.

Ning Slider

Sliders generally are better in wide columns so bear this mind when you place your blog instance in your custom page’s layout.

3. Save your custom page.

4. On the same custom page, open the Below Header HTML Box and paste the following code:


<style>

/*Slider Blog Media Queries*/

@media only screen and (min-width: 300px) and (max-width: 600px)  {
.flexslider li .entry-headline.media-frame {top: 0;width: 100%;}
.flexslider li .entry-headline.media-frame .media-img.avatar-frame{display:none;}
.flexslider li .entry-headline.media-frame .entry-title{margin:5px;}
.flexslider li .entry-headline.media-frame .entry-title > a, .flexslider li .entry-headline.media-frame .entry-title > a:hover {font-size: 16px;}
.flexslider .entry-byline {display: none;}
}

</style>

<script>
xg.addOnRequire(function () {
x$(document).ready(function() {

var html = [],    x$list = x$('.section-blogBundle .module-body');

html.push('<ul>');
x$list.find('.entry.blogSection-entry').each(function() {
html.push('<li>' + x$(this).html() + '</li>');
});
html.push('</ul>');
x$list.replaceWith(html.join(''));

x$('.section-blogBundle').addClass( "flexslider" );
x$('.section-blogBundle ul').addClass( "slides" );
});

x$(window).load(function() {
  x$('.flexslider').flexslider({
    animation: "fade",
slideshow: true,
  });
x$('.section-blogBundle.flexslider').fadeIn();
});

});
</script>

It will look something like this:

Ning Slider Code

5. Press Update and Save the page.

6. Still in Social Site Manager, open up Custom Code and in the End of Page Code section past the following:

<script type="text/javascript" src="http://api.ning.com:80/files/BAcPAB7hbbjDAeyJJ56tJ0On2zfSYK0UAA270Svh-PmVBkiIAOlY5GOfsJmheyCFGbXNQ8oloZCsMHLQP3IvpQj3D6*JznHR/jquery.flexslidermin.js"></script>

<script type="text/javascript">
x$(window).load(function() {
  x$('.flexslider').flexslider({
    animation: "fade",
easing: "swing"
  });
});
</script>

7. Press Save.

8. Final Step: open your Ning 3.0 Design Studio and click on Custom CSS > Theme CSS and paste the following CSS:


/*SLIDER*/

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {
margin: 0; 
padding: 0;
}

.flex-active-slide {
right: 0px;
}

.flexslider .slides > li {list-style:none;display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 auto 20px; background: #fff; border: none; position: relative;width:100%;padding: 10px;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;padding-left:0px;}

.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -10px 10px 0; display: block; background: url(http://api.ning.com:80/files/BAcPAB7hbbh7gep995N4URPxyLmm*5b1CU4D0TL-Yvf-Z4PYmAP5k30DRbTB83h4T8a834JVn2r1kGSHC04X0-SFiVwwkNlo/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 40%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {display:; width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

.flex-direction-nav > li {
list-style: none;
}

.flex-active-slide {
    position: relative;
    right: 0px;
}

.flexslider .flex-control-paging {
    padding: 0;
    position: relative;
    top: 0;
}

.flex-direction-nav {
margin-bottom: 0;
}

/*ADDITIONAL CSS FOR BLOGS IN SLIDER*/

/*Slider Blog Module entry header and title*/
.flexslider li .entry-headline.media-frame {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 55%;
width: 80%;
}

.flexslider li .entry-headline.media-frame .entry-title > a, .flexslider li .entry-headline.media-frame .entry-title > a:hover {
color: #fff;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px #000;
}

.flexslider li .entry-headline.media-frame .entry-title {
    margin-bottom: 6px;
    margin-top: 1%;
}

.flexslider li .entry-headline.media-frame .media-img.avatar-frame {
    border: 1px solid #fff;
    margin: 5px 15px 5px 5px;
    max-width: 60px;
}

/*Slider Blog Module Byline - User name, date etc*/
.flexslider .entry-byline a {
    color: #fff;
}
.flexslider .entry-byline {
    color: #fff;
}

/*Slider Blog Module Lead photo*/
.flexslider li .image-aspect-4-3 {
    background-size: cover;
    height: 0;
    padding-bottom: 40%;
    width: 100%;
}

/*Slider Blog Module Hide Read More, Tags and Comment Count*/
.flexslider li .entry-tags, .flexslider li .entry-commentsCount, .flexslider li .entry-readMore {
    display: none;
}

/*Slider Blog Module Excerpt*/

.flexslider section.entry-content {
    background-color: transparent;
    color: #2e2e2e;
    margin-top: 10px;
    padding: 5px;
}

/*Slider Blog Module Footer*/
.flexslider .module-footer.cf {
    display: none;
}

/*Hide Blog Before Slider Loads*/
.section-blogBundle{
    display: none;
}

9.Press Publish.

The slider will now rotate whatever blog posts there are on the page! Voila!

Some things to note about this plugin:
1) It targets all blog instances (hence the reason for adding the code to the head of the custom page), which is obviously not ideal if you have several on one page. The code can be adapted to target specific blog instances if you know the unique selector given to each blog instance. In the code above for example you might replace

var html = [], x$list = x$('.section-blogBundle .module-body');

with

var html = [], x$list = x$('.section-blogBundle-6622261-Bundle-3 .module-body');

The latter targets a unique blog bundle.

2) It also assumes you have space to put script in your Below Header HTML box. Again, if we target specific blog bundles on specific pages then we can put the script in the Custom Code section of the site, but this will require a certain level of customisation. PM me for me details and a quote.

3) you’ll notice the final line of CSS hides blog instances

/*Hide Blog Before Slider Loads*/
.section-blogBundle{
    display: none;
}

This will hide all blog instances so you may need to target specific blog instances on specific pages if you have more than one. Just pop a question in the comments below with a link to your site so can assist.

See it in action.

Enjoy!

Like this tip? Please feel free to donate:-)




Richard Pettet
Follow me

Richard Pettet

I'm a professional website designer who specialises in Social Network and community website build and design work. Expert with Ning and BuddyPress.
Richard Pettet
Follow me

You might also like