Plugins

Starting with HTML the plugin as following :

 

example:

 

<div id=imgstore style="display:none">
<img src=lib-jquery-plugin-easy-slide-img-img-00031.jpg title="Howe Bay" rel=http://www.google.com>
<img src=lib-jquery-plugin-easy-slide-00032.jpg title="Orange Morning" rel=http://www.yahoo.com>
<img src=lib-jquery-plugin-easy-slide-00033.jpg title="Red Leaves" rel=http://www.excite.com>
<img src=lib-jquery-plugin-easy-slide-00034.jpg title="waterscape">
<img src=lib-jquery-plugin-easy-slide-00035.jpg title="Clashing Fronts">
<img src=lib-jquery-plugin-easy-slide-00036.jpg title="Autumn Mist">
<img src=lib-jquery-plugin-easy-slide-00037.jpg title="Desert dry 1">
<img src=lib-jquery-plugin-easy-slide-00038.jpg title="Ferns 2" rel=http://www.netscape.com></div>

<div id=showhere></div>

 

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',1,1,1000,1,5000,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
}
 

.showbg{// for fadeout effect *This is optional
background-color: black;
}

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;
}