Creating Banner Ads that Scroll Across the Page

Apr 29, 2014 3:43 pm

Hello all, I wanted to go ahead and post some tips for creating scrolling banner ads on a Freedom website!

The first thing you'll want to do is grab the bxSlider plugin ( http://bxslider.com/options ) and put it in your file manager. You'll want to call this script in the head of your website, making sure it comes after the Jquery include. It should look something like this:


<script src="graphics/scripts/bxslider.js" type="text/javascript"></script>

Once that script is included in the head you'll want to create your banner ads and include them in a page layout, depending on how you want your banner ads to function you might lay them out in a couple of different ways


Multiple Banner Positions / Set Order


<div id="sponsors">
    <h3>Special Thanks to Our Sponsors</h3>
    <div id="scrollwrapper">
        [[widget.banner_sponsor_1]]
        [[widget.banner_sponsor_2]]
        [[widget.banner_sponsor_3]]
        [[widget.banner_sponsor_4]]
        [[widget.banner_sponsor_5]]
        [[widget.banner_sponsor_6]]
        [[widget.banner_sponsor_7]]
        [[widget.banner_sponsor_8]]
        [[widget.banner_sponsor_9]]
        [[widget.banner_sponsor_10]]
    </div>
</div>


One Banner Position / Random Order

    
<div id="sponsors">
    <h3>Special Thanks to Our Sponsors</h3>
    <div id="scrollwrapper">
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
        [[widget.banner_sponsor]]
    </div>
</div>

Don't forget to style your banners with CSS, here is some example CSS you can use to get started:


#sponsors { width:100%; overflow:hidden; clear:both; text-align:center; margin: 15px 0;}
#sponsors h3 { font-weight: normal; font-size: 20px; text-align:center; padding:10px; }
#sponsors span { display:inline-block; float:left; width:20%; }
#sponsors span img {max-width:95% !important; height:auto !important; padding:0 2.5%;}


And finally you'll want to activate bxSlider to get your banner ads moving:


<script>

    // Count the number of slides, so that the scroll speed can remain constant no matter how many banners are added
    var bxSlideSpeed = $('#scrollwrapper span').length*835;

    // Call bxSlider function
    $('#scrollwrapper').bxSlider({
        controls: false,
        ticker: true,
        tickerHover: true,
        displaySlideQty: 6.0,
        tickerSpeed: bxSlideSpeed
    });
</script>

Here are some sites we have built here at Accrinet that showcase this functionality:

Basic Slider - http://www.gdaacc.com/
Custom Directory - http://www.alacapchap.org/
Vertical - http://asoft11302.accrisoft.com/augustacc/

You can also check out the Accrilabs presentation we did on this topic on April 17th here:

http://www.accrisoft.com/index.php?src=directory&view=AccriLabs