admin
03-11-2010, 04:50 PM
Demo: http://www.xitclub.com
Modification : Sliding banners
Method : Jquery
Installation:
1. Download the Attached Files and Upload to Your Forum Root
2. Add The Following Code Where you want to Display Adds ( I use "Advertising>Add New Add>Global>Header" in vb 4.0.7)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
#slider { width:468px; height:30px; margin:0 auto; padding:0; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:468px; height:60px; overflow:hidden; }
body { margin:0; padding:0; width:100%;}
/* slider */
.slider {height:60px;}
.block_header h2 { color:#f3f4f4; font:bold 28px Arial, Helvetica, sans-serif; margin:0; padding:40px 10px 10px 10px; line-height:1.4em;}
.block_header p { color:#f3f4f4; font:normal 12px Arial, Helvetica, sans-serif; margin:0; padding:10px; line-height:1.8em;}
</style>
</head>
<body>
<div class="block_header">
<div class="slider">
<div id="slider">
<ul>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px; padding:0px; margin:0px;"> Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Notice : Replace Red text With Your Image or Banner Code
Edit The CSS According to Your Needs
Modification : Sliding banners
Method : Jquery
Installation:
1. Download the Attached Files and Upload to Your Forum Root
2. Add The Following Code Where you want to Display Adds ( I use "Advertising>Add New Add>Global>Header" in vb 4.0.7)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
#slider { width:468px; height:30px; margin:0 auto; padding:0; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:468px; height:60px; overflow:hidden; }
body { margin:0; padding:0; width:100%;}
/* slider */
.slider {height:60px;}
.block_header h2 { color:#f3f4f4; font:bold 28px Arial, Helvetica, sans-serif; margin:0; padding:40px 10px 10px 10px; line-height:1.4em;}
.block_header p { color:#f3f4f4; font:normal 12px Arial, Helvetica, sans-serif; margin:0; padding:10px; line-height:1.8em;}
</style>
</head>
<body>
<div class="block_header">
<div class="slider">
<div id="slider">
<ul>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px; padding:0px; margin:0px;"> Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
<li>
<div style="background-color:#000; color:#FFF; width:468px; height:60px;">Your Image or Banner Code Goes Here
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Notice : Replace Red text With Your Image or Banner Code
Edit The CSS According to Your Needs