Adding A Slider

[Answer Ejiasi]

The following steps will guide you through the process of creating a slider for your Ning Network. You can find an example of a slider here. The default slider contains 3 slides that each include an image, text, and link. The images are 653 pixels wide, and the slider fits within the larger column of a Ning Network 2 column layout.

 

If you would like to place the slider in a column other than the larger column of a 2 column layout, and would therefore like to determine the appropriate width for your slider, please view the possible column widths listed here. Once you have determined the proper width, please update all instances where width is set to 653 pixels in all of the snippets of code listed below with your new width.

 

To begin, go to “My Network" and under Tools click “Custom Code” and paste the following snippet. Notice that the number of slides, width of slider, and length of time per slide can be changed by editing this code. Also, images included in the slider must have the same width.

* Last updated Nov. 11, 2011

 

<script type="text/javascript">
(function($) {
var $previous = $("#slider_back"),
$next = $("#slider_fwd"),
$container = $("#profile_slider_inner"),
$items = $container.find(".item"),
slideWidth = $items.first().width(),
total = $items.length,
current = 1,
waitTime = 6000,
userWaitMultiplier = 1.5,
timer;

function timerTrigger() {
changeSlide(true, true);
}

function changeSlide(next, fromTimer) {
if (next) {
if (current === total) {
current = 1;
} else {
current++;
}
} else {
if (current === 1) {
current = total;
} else {
current--;
}
}

$container.stop(true, true).animate({
marginLeft: -((current - 1) * slideWidth)
}, "slow");

clearTimeout(timer);
// if slide change was caused by a user interaction then delay the
// timer to give the user additional time on their chosen slide
timer = setTimeout(timerTrigger, fromTimer ? waitTime : waitTime * userWaitMultiplier);
}

$previous.click(function (event) {
changeSlide();
return false;
});

$next.click(function (event) {
changeSlide(true);
return false;
});

timer = setTimeout(timerTrigger, waitTime);

})(jQuery);
</script>


Click "Save" and then navigate to the Design Studio by clicking on “My Network”. Under "Settings" click “Appearance”.

 

Click "Advanced" and paste the following CSS snippet:

/*Slider */
#profile_slider {
height:310px;
overflow:hidden;
margin-left: -5px;
margin-top: -5px;
background:#000;
}

#profile_slider_inner {
width:100000px;
float:left;
}

#profile_slider .item {
float:left;
width:653px;
margin:0;
position:relative;
}

#profile_slider .item img {
margin:0;
width:653px !important;
max-width:653px !important;
}

/* Slider Overlay Styles */

#profile_slider .item .overlay {
margin-top:-50px;
padding:18px 18px 12px;
background:url(http://static.ning.com/design/images/60alpha.png) repeat scroll 0 0;
position:absolute;
bottom:87px;
width:653px;
}

#profile_slider .item .overlay h3 {
font-size:24px;
line-height:24px;
float:left;
text-transform:capitalize;
color:#fff;
width:520px;
}
#profile_slider .item .overlay p {
float:left;
color:#fff;
width:520px;
}
#profile_slider .item .overlay a {
color:#fff;
font-weight:bold;
text-decoration:underline;
}

/* Slider Navigation Buttons */

#slider_nav {
position:absolute;
bottom:30px;
right:20px;
}

#slider_nav .btn {
height:24px;
width:29px;
float:left;
background-color:#000;
margin-right:5px;
background-position:1px 2px;
background-repeat:no-repeat;
cursor:pointer;
-moz-border-radius: 4px; /* FF1+ */
-webkit-border-radius: 4px; /* Saf3+, Chrome */
border-radius: 4px; /* Opera 10.5, IE 9 */
border:1px solid #000000;
}

#slider_nav .btn:hover {
border:1px solid #3C78A7;
}

#slider_back {
background-image:url(http://static.ning.com/design/images/slider_back_btn.png);
}

#slider_fwd {
background-image:url(http://static.ning.com/design/images/slider_fwd_btn.png);
}


Once you've done that, click “Publish”.

 

Next, navigate to "My Network" again, and under "Settings" click "Features Layout". Insert a Text Box where you want the slider to appear, and then save your changes.

 

Navigate to your homepage, which should now include a Text Box. Click the “Edit” button.

 

Click the "HTML" button, and paste the following HTML code snippet:

<div id="profile_slider"> <div id="profile_slider_inner">
<div class="item">
<a href="http://www.google.com"><img src="http://static.ning.com/design/images/building.jpg"; width="653" /></a>
<div class="overlay">
<h3>Slide 1 Headline</h3>
<p>Sample text for slide 1 <a href="http://www.google.com">Link 1</a></p>
</div>
</div>
<div class="item">
<a target="slide2" href="http://www.ning.com"><img src="http://static.ning.com/design/images/post_box.jpg"; width="653" /></a>
<div class="overlay">
<h3>Slide 2 Headline</h3>
<p>Sample text for slide 2 <a href="http://www.ning.com">Link 2</a></p>
</div>
</div>
<div class="item">
<a target="slide3" href="http://www.flickr.com/"><img src="http://static.ning.com/design/images/bridge.jpg"; width="653" /></a>
<div class="overlay">
<h3>Slide 3 Headline</h3>
<p>Sample text for slide 3 <a href="http://www.flickr.com/">Link 3</a></p>
</div>
</div>
<div id="slider_nav">
<a name="slider_back" class="btn" id="slider_back"></a><a name="slider_fwd" class="btn" id="slider_fwd"></a>
</div>
</div>
</div>


Click the "HTML" button again to replace the images and text for your slides.

 

When you've finished, click “Save” and be sure to refresh the browser window.

 

Navigate back to your homepage and your slider should be there with updated images and text!

[Premlal]

Will it work with old format. I have reverted back to old design, as while upgrading to new design studio many of our members complaining of error in display. Please advise.

[Tim Clark]

 

Hello, well i followed each of the steps, and it works brilliantly!! Man, Thank You very much i was wondering how i was going to be able to add this cool feature! Now i just have to create some artwork for my network. I am going to use Picnik while it's still around (it goes away on 4-19-2012) but again, Thank You! Now all i need to learn is how to add that cool black box at the bottom of my community from, Share This! If anyone knows how to do that please let me know Thank You! Also your all invited to come and join my network, it will be highly promoted starting on 4-1-2012. And if you need a custom website i am an award winning web-designer and WIX Designer. Thanks!

Tim Clark, Owner

The SNN Companies

Unsigned Music Union

 

[e-mail]

Link - http://unsignedmusicunion.ning.com/

[Answer Ejiasi]

Hi Tim,

Glad to see that the slider worked for you!

Also, just to clarify some earlier questions, the Javascript code has been updated, and that slider should hopefully work fine now whether you're using the Design Studio or the old Appearance Editor.