Banner Rotator that connects to Database

[maharrington]

Hi,

I have done some research and have found an example of a banner rotator (that I'm presently using) - as you can see here: http://www.clickteesside.com/

What I'm wanting to do is like the imgsrc, links and message of the rotator to a database value, so that there are more or less images in rotation based on the amount of records in the database.

I have already set up a table (click.click_banners):
- id
- bannerVisible (int)
- bannerImagePath (varchar)
- bannerLink (varchar)
- bannerMsg (varchar)

And the original code for the banner is:

            <section id="bannerArea">
                <script type="text/javascript">
                var imgs1 = new Array("images/banner/banner1.jpg","images/banner/banner2.jpg","images/banner/banner3.jpg","images/banner/banner4.jpg");
                var lnks1 = new Array("itunes.html","http://www.tees-su.org","http://jotformeu.com/31343187796362","presenters.php");
                var alt1 = new Array("Download our iTunes app now!","We're at Final Fling!","Give your feedback on our website now!","View our presenters!");
                var currentAd1 = 0;
                var imgCt1 = 4;
                function cycle1() {
                if (currentAd1 == imgCt1) {
                currentAd1 = 0;
                }
                var banner1 = document.getElementById('adBanner1');
                var link1 = document.getElementById('adLink1');
                banner1.src=imgs1[currentAd1]
                banner1.alt=alt1[currentAd1]
                document.getElementById('adLink1').href=lnks1[currentAd1]
                currentAd1++;
                }
                window.setInterval("cycle1()",7000);
            </script>
            <a href="itunes.html" id="adLink1" target="_top">
                <img src="images/banner/banner1.jpg" id="adBanner1" border="0" width="100%" height="100%"></a>
            </section>

I'm just wanting it so that they are uploadable (which I've managed to sort out, so isn't an issue in this matter), and then editable as to whether they're visible and the message/link changeable from the CMS.

[diafol]

Javascript cannot connect to the server/database unless you use Ajax or provide the js with initial data from the DB via php. Alternatively, you could use node.js and something like mongoDB, but that's not for the faint-hearted.

In order to use your current code, you could do something like this:

var imgs1 = new Array(<?php echo $imgstring;?>);
var lnks1 = new Array(<?php echo $linkstring;?>);
var alt1 = new Array(<?php echo $commentstring;?>);
var currentAd1 = 0;
var imgCt1 = <?php echo $countItems;?>;

This is a bit of a mess, but I'm sure you get the idea.
Ideally, you'd use json output and create just the one array in js (I'm using vanilla mysql here for clarity):

$arr = array();
while($row = mysql_fetch_assoc($result)){
    $arr[] = $row;
}
$toJS = json_encode($arr);

Then in your js:

var myJson = <?php echo $toJS;?>;

You now have the ability to loop through the myJson array and pick out the pertinent fields (like link, img and comment) by name.

So start on index 0 and then use a loop with a timer or even a timer with an incrementer. When the incrementer/loop comes to the end of the array, reset the index to 0. Should be a lot simpler with far fewer variables to track.

[maharrington]

Thanks for your help diafol, however, I've found a better option for my needs here

http://marktyrrell.com/labs/blueberry/

With this one, it uses the <li>'s in the HTML to figure out how many banners it has - therefore making it so much easier to loop with the database.

[diafol]

With this one, it uses the <li>'s in the HTML to figure out how many banners it has - therefore making it so much easier to loop with the database.

Why is that easier? If you have an array, you can just loop through it - you don't need to pre-count at all.