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
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! :)
SP
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.
(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?
a friend of mine exclaims "sweeeeet potato" when he likes something. :-)
-
1
-
2
-
3
-
4
-
5
of 5 Next