Plugins

Starting with HTML the plugin as following :

 

example:

STEP 1: setup where is your news 
// Your news container

<div id=orgnews  style="display:none">
<div class=news_style>.......</div>
<div class=news_style>.......</div>
.................................
</div>

STEP 2: setup where to display 

//Where your news display

<div id=showhere></div>// for news content display

STEP 3: insert button images 

//Where image button

<div  id=news_button>// for Prev . Pause. Next . image button
<img src=lib-jquery-plugin-easy-plus-prev.gif align="absmiddle" ><img src=lib-jquery-plugin-easy-plus-pause.gif align="absmiddle" ><img src=lib-jquery-plugin-easy-plus-next.gif align="absmiddle" >
</div>

STEP4: setup where to display news title

// Where news title display

<div id=news_display ></div>

 

****Easy News Plus 1.0.1 Change Initializers (init methods) and add 3 variable names (playingtitle,nexttitle,prevtitle)*******

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery.easynews.plus.js"></script>
 

<script>
$(document).ready(function(){
var newsoption = {
firstname: "mynews",
secondname: "showhere",
thirdname:"news_display",
fourthname:"news_button" ,
playingtitle:"Now Playing:",
nexttitle:"Next News:",
prevtitle:"prev News:",
newsspeed:'8000',
isauto:'1'
}
$.init_plus(newsoption);
});
</sript>
 

 

• firstname has to be the id of the div containing the news
• secondname is the id of container where you like news to display
• thirdname:  is the id of container where you like news title to display
• fourthname :  is the id of container where images file inside(prev.pause.next)
• playingtitle: set any thing you like (default is Now Playing:)
• nexttitle:set any thing you like (default is Next News:)
• prevtitle:set any thing you like (default is Prev News:)
• newsspeed : auto play pause time (1000=1sec default is 6sec)
• isauto : 1:for autoplay (default is 1)

Q.is there any css need?

A.Yes !! You need the following CSS (! IMPORTANT)

.news_style{// To indicate is news content
display:none;
}

.news_show // where news todisplay
{
position:absolute;/*important*/
background-color: white;
color:black;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
clip:rect(0px 350px 150px 0px);/*important*/
}

.news_border// wrap .news_news for border
{
background-color: white;
width:352px;
height:152px;
font: normal 100% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 1px solid gray;
padding: 5px 5px 5px 5px;
}

.news_mark // wrap images button and news title
{
background-color:white ;
font: normal 70% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
width:363px;
height:35px;
color:black;
text-align:center;
}

.news_title // news title display style
{
font: bold 120% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 0px solid gray;
padding: 5px 0px 9px 5px;
color:black;
}

.news_show img // option this
{
margin-left: 5px;
margin-right: 5px;
}

.buttondiv // for images button
{
position: absolute;
padding: 5px 5px 5px 5px;
background-color:white ;
border: 1px solid gray;
/*border-top-color: white;*/
border-top:none;
height:20px;
}

.news_move // for inside news slide style
{
position: relative; /*important*/
}

.mytable //fix inside news slide table
{
width:350px;/*important-- this control how many px to left or right*/
height:150px;
vertical-align: top;
}

what your news slide look like, it depend on your css ,if you are lazy to change it.you can copy css from demo page.

Q.can add hyperlink to my news?

A.any thing you can play with HTML  also can play with here.

Q.can I change the images look(prev.pause.next)?

A.Yes ! but please keep their name as (prev.gif prev0.gif pause.gif pause0.gif next.gif next0.gif)and keep their id as (news_prev , news_pause, news_next)

Q.how can I setup my news title?

A.for example:if you put your news as following.please set rel=xxxxxx as your news title.

<div id=mynews_hide_here >
<div rel=mynews_title1 class=news_style>................</div>
<div rel=mynews_title2 class=news_style>...............</div>
</div>

***** IMPORTANT CLASS NAME REQUIRED********

How Easy News know how many news needed to display and what is prev or next news? Easy News  search any continer has class named news_style then display it .see prev example .

Back to Mian Page click download to download  it.