Categories
Related Products
Follow @expbuilder
Subscribe to  to get latest news
|
| Visit ExpBuilder group |
ExpBuilder slider show v1.0
You can view your products and ads banner by slider show with a beautiful view , click here to see the Demo
Get Started:
$(element).slidershow({options -> width, height,movingtime});
first include the library files:
Jquery file library and Expbuilder Slider show file library inside <head> tag:
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="slidershow.expbuilder.js"></script>
</head>
Second create your own html code in <body> tag … it must consists of parent element with <ul> and <li> childs like the following:
<div id="theparentelement">
<ul>
<li>Put your first code here</li>
<li>Put your second code here</li>
<li>Put your third code here</li>
<li>blah blah blah ....</li>
.... etc
</ul>
</div>
Third call the slider show function be select the parent element like (theparentelement) id:
<script type="text/javascript">
$("#theparentelement").slidershow();
</script>
<style type="text/css">
img
{
float: left;
margin-right: 5px;
}
</style>
<div id="products" style="border: 1px solid #000000"> <ul>
<li>
<h2><img src="Main-Page_31.jpg"> Product 1</h2>
here is details about Product 1
</li>
<li>
<h2><img src="Main-Page_35.jpg"> Product 2</h2>
here is details about Product 2
</li>
<li>
<h2><img src="demo.jpg"> Product 3</h2>
here is details about Product 3
</li>
<li>
<h2><img src="Main-Page_44.jpg"> Product 4</h2>
here is details about Product 4
</li>
</ul></div>
Demo Source Code JavaScript:
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="slidershow.expbuilder.js"></script>
<script type="text/javascript">
$("#products").slidershow();
</script>
Demo 2 Source Code (HTML and JavaScript) – Full Page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="slidershow.expbuilder.js"></script>
</head>
<body>
<div id="adsbanner">
<ul>
<li>
<img src="http://www.url4share.com/xml/url4shareadsbanner.jpg">
</li>
<li>
<img src="http://ads.url4share.com/uploadfiles/16012011/games_shahysa_com.png">
</li>
<li>
<img src="http://ads.url4share.com/uploadfiles/16012011/forum_arabjquery_com.png">
</li>
</ul>
</div>
<script type="text/javascript">
$("#adsbanner").slidershow({width: 478, height:80});
</script>
</body>
</html>
To Download Script:
Download from Attachment
Have fun 
