Plugins

Starting with HTML the plugin as following :

 

example:

 

<div id=imgstore style="display:none">
<img src=banner1.jpg title="Pen" rel=http://www.pen.com>
<img src=banner2.jpg title="My Baby" rel=http://www.baby.com>
<img src=banner3.jpg title="Me" rel=http://www.me.com>
<img src=banner4.jpg title="Drink" rel=http://www.drink.com>
<img src=banner5.jpg title="Crazy Jack" rel=http://www.jack.com>
<img src=banner6.jpg title="He" rel=http://www.he.com></div>

 

<div id=imgstore1 style="display:none">
<img src=banner7.jpg title="she" rel=http://www.she.com>
<img src=banner8.jpg title="worry" rel=http://www.worry.com>
<img src=banner9.jpg title="what" rel=http://www.waht.com>
<img src=banner10.jpg title="fire" rel=http://www.fire.com>
<img src=banner11.jpg title="smell" rel=http://www.smell.com>
</div>

 

<div id=showhere></div>

<div align=center style="background:black;height: 700px; right: 350px; position: absolute; top: 0px; width: 192px; z-index:2000;color:#cccccc;" id=showhere1>

 

you can name any DIV id you want,and put any number images of this container.

 

to  initial the plugins just like

<script type="text/javascript" src="path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="jquery.myslide.js"></script>
<script>
$(document).ready(function(){
 

$.init_slide('imgstore','showhere',0,0,0,1,5000,1);
$.init_slide('imgstore1','showhere1',1,0,2000,1,4000,1);

});
</script>

$.init_slide(firstname,secondname,watermark,iscover,

speed,autoplay,playtime,clickable);

 

 

• firstname has to be the id of the div containing the images
• secondname is the id of container where you like slideshow to display
• watermark : using watermark or not(1 is using)
• iscover : using images cover function or not(1 is using)
• speed : images cover fade speed (1000=1sec)
• autoplay : using auto play or not (1 is using)
• playtime: auto play pause time (1000=1sec default is 6sec)
• clickable is show or hide clickable link

please keep following css on your page or style sheet ,you can edit any style or color you like.but don't change their name

 

 

.link_nor{// for clickable normal link
background-color: #333333;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}

.link_act
{// for clickable active link
background-color:#808000;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}
 

span{// for watermark
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
color:black
}

.gray
{// for cover
background-color: gray;
position: absolute;
border: 0px solid #9F6D11;
z-index: 100;
}

img{// for image border
border: 0px solid #663300;
background-color: #663300
}

.opa{// for watermark opacity
color:white;
padding:10px 20px 0px 20px;
position: absolute;
z-index: 101;
background-color: #FFA928;
opacity:0.5;
filter: alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=50, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16);
-moz-opacity: 0.5;
}

we change link style as following

 

#showhere1link a.link_nor{//for showhere1 normal link
background-color: #333333;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid red;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}

#showhere1link a.link_act{//for showhere1 active link
background-color:red;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid red;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}