Sliding Banners or Images on Forum Home or Everywhere

Sliding Banners or Images on Forum Home or Everywhere

Mod Version: 1.00, by XiTCLUB

vB Version: 4.0.x	Rating: (7 votes - 4.86 average)	Installs: 37
Released: 26 Oct 2010	Last Update: Never	Downloads: 224
Not Supported

Hi,

Modification : Sliding banners

Method : Jquery

Example : http://www.xitclub.com/forum.php?styleid=29 ( See Top right Banners on Forum home )

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)

Code:

<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

Download

js.zip (20.9 KB, 276 downloads)

vBulletin LTS