The Arcive of vBulletin Modifications Site.

Sliding Banners or Images on Forum Home or Everywhere · **Released**: 10-25-2010

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

XiTCLUB · #2 10-26-2010, 09:59 AM

If it works Then Please Reply or "Mark as Installed"

synseal · #3 10-26-2010, 10:00 AM

Thanks, works a treat!. :up: *Installed.

gokhansancar · #4 10-26-2010, 03:18 PM

Thanks it works

synseal · #5 10-26-2010, 04:35 PM

Is there a way for it to show just one banner on page load.

When I refresh the page sometimes it shows all four banners one above the other until the page has fully loaded and then it shrinks down to just one, then it starts to rotate.

Thanks.

SeZoNaS · #6 10-26-2010, 05:12 PM

Amaaaaaaaaaaizing ,, Download is in progress (d)

XiTCLUB · #7 10-26-2010, 08:24 PM

Quote:

Originally Posted by synseal

Is there a way for it to show just one banner on page load.

When I refresh the page sometimes it shows all four banners one above the other until the page has fully loaded and then it shrinks down to just one, then it starts to rotate.

Thanks.

You can see it here http://www.techkings.org/forum/

This is not Possible Because we are displaying our contents in an Un-Ordered List and Controlling them with CSS & Jquery when we open our website all the data loads within the form but jquery & slider.js loads some time late as slider.js file controls the loop of banners which loads later

Manoel J?nior · #8 10-26-2010, 10:00 PM

LOL

Thanks!!!

Eduardo Leon · #9 10-27-2010, 12:41 AM

Quote:

Originally Posted by Manoel J?nior

LOL

Thanks!!!

what ?

just say thanks for sharing this . . . !

...

barcena · #10 10-27-2010, 10:49 AM

Can this be used to show google ads?