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

NC for Hire

Hi all,

One of the features currently missing from Ning 3.0 is the photo slideshow.

On Ning 2.0 this is built using Flash, not great if you're an iOS fan as they won't display on your iPads and iPhones. Their is uncertainty over whether the slideshow will make a return as a built in option on Ning 3.0. Even if it does make a return, I'm not sure we can expect to see it any time soon.

So, with that in mind, I've come up with this tip based on the Responsive Slider Tip I posted a while back.

What the tip does: It adds a responsive photo slideshow to member profile pages. It displays whatever photos are displayed in the member's 'Photos' tab within the slideshow. I believe that a member profile page will display a max of 20 photos, so all these are bundled into the slider.

Here's what you do.

1. Make sure you've added photos to your Ning 3.0 site. I figure you know how to do this.

2. In Social Site Builder, select your 'Members' page and open up the 'Below Header HTML' box, eg:

Click to enlarge

3.Insert the following scripts in the 'Below Header HTML' box:


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

var html = [],    x$list = x$('.profilePageContentPane-PhotoEntry .photoListPage.matrix .row');

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

x$(".profilePageContentPane-PhotoEntry .photoListPage.matrix").addClass( "flexslider" );
x$(".profilePageContentPane-PhotoEntry .photoListPage.matrix ul").addClass( "slides" );
});
});
</script>

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

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

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

 

4. in the same 'Below Header HTML' box where you've just added the script now add the following css:


<style>

/*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 0 60px; background: #fff; border: none; position: relative;}
.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: -20px 0 0; display: block; background: url( https://api.ning.com/files/BAcPAB7hbbh7gep995N4URPxyLmm*5b1CU4D0TL-Yvf-Z4PYmAP5k30DRbTB83h4T8a834JVn2r1kGSHC04X0-SFiVwwkNlo/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; 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:none; 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: -60px !important;
}

/*Profile Page Specific*/
.slides .matrix-item {
background-position: center;
background-size: contain;
}

</style>


5. Press update on the 'Below Header HTML' box and then Save at the bottom of the page.

6. You're done!

Demo on my sandbox.

Please note this is designed for member pages, not other custom pages like your homepage.

Known issues: it can crash my iPad, Chrome loads the photos a bit weirdly, the slider stops sliding as soon as you start navigating using the arrows. I'll try to work these out ASAP.

.txt files attached in case of formatting issues using the above.

The result:

Enjoy

SP

 

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

  • We should also continue asking Ning to include this feature in 3.0, since they have provided it already for years to us in 2.0.  See thread: https://creators.ning.com/forum/topics/photo-slides-for-ning-3-0

    Every vote counts!  :)

    • NC for Hire

      Hi SP, thanks for this positive tip, I'm really glad you posted it as it solves a problem I was having.

      You're welcome, Strumelia, i'm glad you found a positive use for it.

      SP

       

  • This reply was deleted.
  • Hello, SP. I have a few things I'd like to say here about your tip.

    1) First off (I have to get this out of the way), I thought you you were black. I pictured you as being a heavy set black man, with a deep voice. 

    2) When I heard Ning was doing away with slideshows, I was thrilled. Like many things that seemed like a good idea at the time (flashing animated gifs, tool bars, etc.), I was only too happy to see it gone. I thought your tip was a good tip when I read through it, but it wasn't for me. 

    3) Or so I thought. Something told me to have a look at the demo at your site, and I'm glad I did. It looks awesome!

    If we're still going to use slideshows on our sites, this is how they should look. Very nice, very elegant! Outstanding!

    I still need to give it some thought, but I think I might like something like this on my Ning 3.0 network.

    Thank you as always for sharing.

    • NC for Hire
      P,  "I'm a dude playing the dude, disguised as another dude" :-)

      (or however the quote goes)

      Glad you like the tip.

      SP
      • Hahaha! You're awesome, dude!

      • ROFLMAO I love that movie!  idk how I missed this tip but definitely going to work on implementing it today.  Thank you for sharing it SP.  btw, how did you get that nickname?

        • NC for Hire

          a friend of mine exclaims "sweeeeet potato" when he likes something. :-)

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels