Answer Ejiasi's Posts - Ning Design Network2024-03-28T19:39:01ZAnswer Ejiasihttp://design.ning.com/profile/AnswerEjiasi480http://storage.ning.com/topology/rest/1.0/file/get/1550291728?profile=RESIZE_48X48&width=48&height=48&crop=1%3A1http://design.ning.com/profiles/blog/feed?user=3klgue7c35o0k&xn_auth=noAdding A Slidertag:design.ning.com,2011-06-24:6330953:BlogPost:45132011-06-24T23:00:00.000ZAnswer Ejiasihttp://design.ning.com/profile/AnswerEjiasi480
<p>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 <a href="http://tutorial01.ning.com/" target="_blank">here</a>. 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.</p>
<p> </p>
<p>If you would like to place the slider in a column other than the larger column of a 2…</p>
<p>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 <a href="http://tutorial01.ning.com/" target="_blank">here</a>. 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.</p>
<p> </p>
<p>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 <a href="http://go.ning.com/studio/docs/overview/appearance_panel.html#layout" target="_blank">here</a>. 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.</p>
<p> </p>
<p>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.</p>
<p><span style="color: #ff0000;"><em>* Last updated Nov. 11, 2011</em></span></p>
<p> </p>
<p><code><script type="text/javascript"><br/> (function($) {<br/>
var $previous = $("#slider_back"),<br/>
$next = $("#slider_fwd"),<br/>
$container = $("#profile_slider_inner"),<br/>
$items = $container.find(".item"),<br/>
slideWidth = $items.first().width(),<br/>
total = $items.length,<br/>
current = 1,<br/>
waitTime = 6000,<br/>
userWaitMultiplier = 1.5,<br/>
timer;<br/>
<br/>
function timerTrigger() {<br/>
changeSlide(true, true);<br/>
}<br/>
<br/>
function changeSlide(next, fromTimer) {<br/>
if (next) {<br/>
if (current === total) {<br/>
current = 1;<br/>
} else {<br/>
current++;<br/>
}<br/>
} else {<br/>
if (current === 1) {<br/>
current = total;<br/>
} else {<br/>
current--;<br/>
}<br/>
}<br/>
<br/>
$container.stop(true, true).animate({<br/>
marginLeft: -((current - 1) * slideWidth)<br/>
}, "slow");<br/>
<br/>
clearTimeout(timer);<br/>
// if slide change was caused by a user interaction then delay the<br/>
// timer to give the user additional time on their chosen slide<br/>
timer = setTimeout(timerTrigger, fromTimer ? waitTime : waitTime * userWaitMultiplier);<br/>
}<br/>
<br/>
$previous.click(function (event) {<br/>
changeSlide();<br/>
return false;<br/>
});<br/>
<br/>
$next.click(function (event) {<br/>
changeSlide(true);<br/>
return false;<br/>
});<br/>
<br/>
timer = setTimeout(timerTrigger, waitTime);<br/>
<br/>
})(jQuery);<br/>
</script><br/>
</code></p>
<p>Click "Save" and then navigate to the Design Studio by clicking on “My Network”. Under "Settings" click “Appearance”.</p>
<p> </p>
<p>Click "Advanced" and paste the following CSS snippet:</p>
<p><code>/*Slider */<br/> #profile_slider {<br/>
height:310px;<br/>
overflow:hidden;<br/>
margin-left: -5px;<br/>
margin-top: -5px;<br/>
background:#000;<br/>
}<br/>
<br/>
#profile_slider_inner {<br/>
width:100000px;<br/>
float:left;<br/>
}<br/>
<br/>
#profile_slider .item {<br/>
float:left;<br/>
width:653px;<br/>
margin:0;<br/>
position:relative;<br/>
}<br/>
<br/>
#profile_slider .item img {<br/>
margin:0;<br/>
width:653px !important;<br/>
max-width:653px !important;<br/>
}<br/>
<br/>
/* Slider Overlay Styles */<br/>
<br/>
#profile_slider .item .overlay {<br/>
margin-top:-50px;<br/>
padding:18px 18px 12px;<br/>
background:url(<a href="http://static.ning.com/design/images/60alpha.png">http://static.ning.com/design/images/60alpha.png</a>) repeat scroll 0 0;<br/>
position:absolute;<br/>
bottom:87px;<br/>
width:653px;<br/>
}<br/>
<br/>
#profile_slider .item .overlay h3 {<br/>
font-size:24px;<br/>
line-height:24px;<br/>
float:left;<br/>
text-transform:capitalize;<br/>
color:#fff;<br/>
width:520px;<br/>
}<br/>
#profile_slider .item .overlay p {<br/>
float:left;<br/>
color:#fff;<br/>
width:520px;<br/>
}<br/>
#profile_slider .item .overlay a {<br/>
color:#fff;<br/>
font-weight:bold;<br/>
text-decoration:underline;<br/>
}<br/>
<br/>
/* Slider Navigation Buttons */<br/>
<br/>
#slider_nav {<br/>
position:absolute;<br/>
bottom:30px;<br/>
right:20px;<br/>
}<br/>
<br/>
#slider_nav .btn {<br/>
height:24px;<br/>
width:29px;<br/>
float:left;<br/>
background-color:#000;<br/>
margin-right:5px;<br/>
background-position:1px 2px;<br/>
background-repeat:no-repeat;<br/>
cursor:pointer;<br/>
-moz-border-radius: 4px; /* FF1+ */<br/>
-webkit-border-radius: 4px; /* Saf3+, Chrome */<br/>
border-radius: 4px; /* Opera 10.5, IE 9 */<br/>
border:1px solid #000000;<br/>
}<br/>
<br/>
#slider_nav .btn:hover {<br/>
border:1px solid #3C78A7;<br/>
}<br/>
<br/>
#slider_back {<br/>
background-image:url(<a href="http://static.ning.com/design/images/slider_back_btn.png">http://static.ning.com/design/images/slider_back_btn.png</a>);<br/>
}<br/>
<br/>
#slider_fwd {<br/>
background-image:url(<a href="http://static.ning.com/design/images/slider_fwd_btn.png">http://static.ning.com/design/images/slider_fwd_btn.png</a>);<br/>
}<br/>
</code></p>
<p>Once you've done that, click “Publish”.</p>
<p> </p>
<p>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.</p>
<p> </p>
<p>Navigate to your homepage, which should now include a Text Box. Click the “Edit” button.</p>
<p> </p>
<p>Click the "HTML" button, and paste the following HTML code snippet:</p>
<p><code><div id="profile_slider"> <div id="profile_slider_inner"><br/> <div class="item"><br/>
<a href="<a href="http://www.google.com%22%3E%3Cimg">http://www.google.com"><img</a> src="<a href="http://static.ning.com/design/images/building.jpg%22">http://static.ning.com/design/images/building.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 1 Headline</h3><br/>
<p>Sample text for slide 1 <a href="<a href="http://www.google.com%22%3EClick">http://www.google.com"></a>Link 1</a></p><br/>
</div><br/>
</div><br/>
<div class="item"><br/>
<a target="slide2" href="<a href="http://www.ning.com%22%3E%3Cimg">http://www.ning.com"><img</a> src="<a href="http://static.ning.com/design/images/post_box.jpg%22">http://static.ning.com/design/images/post_box.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 2 Headline</h3><br/>
<p>Sample text for slide 2 <a href="<a href="http://www.ning.com%22%3ERead">http://www.ning.com"></a>Link 2</a></p><br/>
</div><br/>
</div><br/>
<div class="item"><br/>
<a target="slide3" href="<a href="http://www.flickr.com/%22%3E%3Cimg">http://www.flickr.com/"><img</a> src="<a href="http://static.ning.com/design/images/bridge.jpg%22">http://static.ning.com/design/images/bridge.jpg"</a>; width="653" /></a><br/>
<div class="overlay"><br/>
<h3>Slide 3 Headline</h3><br/>
<p>Sample text for slide 3 <a href="<a href="http://www.flickr.com/%22%3ELink">http://www.flickr.com/"></a>Link 3</a></p><br/>
</div><br/>
</div><br/>
<div id="slider_nav"><br/>
<a name="slider_back" class="btn" id="slider_back"></a><a name="slider_fwd" class="btn" id="slider_fwd"></a><br/>
</div><br/>
</div><br/>
</div><br/>
</code></p>
<p>Click the "HTML" button again to replace the images and text for your slides.</p>
<p> </p>
<p>When you've finished, click “Save” and be sure to refresh the browser window.</p>
<p> </p>
<p>Navigate back to your homepage and your slider should be there with updated images and text!</p>