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!

Views: 10135

Comment by Premlal on July 1, 2011 at 7:31pm
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.
Comment by Tim Clark on March 14, 2012 at 3:55pm

 

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

 

timclark@somethingnewnow.net

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

Comment by Answer Ejiasi on April 9, 2012 at 6:40pm

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.

Comment

You need to be a member of Ning Design Network to add comments!

Join Ning Design Network


Forum

Features Layout on Non-Main Pages 7 Replies

Started by Nathan Stearns in Questions and Answers. Last reply by JFarrow Sep 13, 2012.

Tabbed Panel 1 Reply

Started by James Kelly in Questions and Answers. Last reply by Tobias Selzer May 15, 2012.

Adding a submenu to header? 17 Replies

Started by Linda Carter in Questions and Answers. Last reply by Tobias Selzer Mar 6, 2012.

Adding social media icons to Ning Bar: HELP NEEDED 3 Replies

Started by Lynnette Eve in Questions and Answers. Last reply by Florence Tsai Feb 8, 2012.

Documentation Section Down 3 Replies

Started by Nathan Stearns in Questions and Answers. Last reply by Jen Sep 24, 2011.

© 2024   Created by Ning Advocacy.   Powered by

Badges  |  Report an Issue  |  Terms of Service