jquery content slider in ning

by 3 replies
5
Does anybody know how I could implement a featured content slider on a ning.com site? I wan't a quick install for this if possible.

If not, who thinks they can develop one for a fee?
#programming #content #jquery #ning #slider
  • Ning is very restrictive on what they will allow you to add. They pissed off a lot of people when they stopped offering a free service. In my opinion Ning is for technically challenged who cannot put together a simple community site on a cheap hosting. Since you talk about using jQuery I take it that you are somewhat technical, so my question is - why use Ning?
  • McTwisty, is this still a requirement for you? If so, I can advise.
    • [1] reply
    • Insert the following code in the HEAD section of your page

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

</script>
      Insert the below sample code into the BODY section of your page:
      Code:
      <h2>Example 1</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
Content 2 Here.
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider1" class="pagination">

</div>

<script type="text/javascript">

featuredcontentslider.init({
    id: "slider1",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.2],  //[true/false, fadedegree]
    autorotate: [true, 3000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})

</script>




<br />
<h2>Example 2, Pagination links from markup</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
    id: "slider2",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.2],  //[true/false, fadedegree]
    autorotate: [false, 3000],  //[true/false, pausetime]
    onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
})

</script>
      HTML and CSS Structure

      Code:
      <div id=""  	class="sliderwrapper">
	
	<div class="">
	Content 1 Here.
	</div>
	
	<div class="">
	Content 2 Here.
	</div>
	
	<div class="">
	Content 3 Here.
	</div>
	
	</div>
	
	<div id="" class="pagination">
	
	</div>
	
	<script type="text/javascript">
	
	featuredcontentslider.init({
	id: "", //id of main slider DIV
	contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax",  	"path_to_file"]
	toc: "#increment", //Valid values: "#increment", "markup", ["label1",  	"label2", etc]
	nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to  	"" to hide.
	enablefade: [true, 0.2], //[true/false, fadedegree]
	autorotate: [true, 3000], //[true/false, pausetime]
	onChange: function(previndex, curindex){ //event handler fired whenever  	script changes slide
	//previndex holds index of last slide viewed b4 current (1=1st slide,  	2nd=2nd etc)
	//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
	})
	
	</script>
  • [DELETED]
Join the discussion

Next Topics on Trending Feed