Issue adding text under rotating banners

[azgold472]

Hi there I have the following code.

   <script language="text/javascript">
                        banner1 = new Banner('banner1');
<?php
$con = mysql_connect("localhost:3306","User","Pass");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("barndata", $con);
$today = date("Y-m-d");
$result = mysql_query("SELECT * FROM event where Date >= '$today' ORDER BY Date ASC LIMIT 0, 7")  ;
   while ($row = mysql_fetch_array($result)) {
   echo 'banner1.add("text","';
   echo $row['ArtistDate'];
   echo '" , ,,, ';
   echo '"';
   echo $row['ImgLink'];
   echo '"';
   echo ');';
   }
   mysql_close($con);
?>
                        document.write(banner1);
                        banner1.start();
        </script>

What i am trying to do is add the Date for the banner below the image. It displays the rotation of the images perfectly without modification but when i add the date from the database it does not show the images nor the text. To see a working copy of this please go to www.thebarninsanford.com. The rotating banner on the right of the main page is what im working on. I am trying to reuse images and just have the show date appear under the images. Any help would be aprechiated!!

Thanks

Did you do the site in Publisher?

[azgold472]

no

Why don't you try a plugin? Here are 55 jquery carousels, some of which support captions:

http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

Get php to retrieve the relevant data and paste it into js/jquery.

[azgold472]

thats a great suggestion however, im sure im just missing something simple to get this working. The images rotate without issue im just having a issue adding the text under it from the database.

If you could show the parameters that should go with the banner1.add() function.

[azgold472]

`Inline Code

// BANNER OBJECT
function Banner(objName){
    this.obj = objName;
    this.aNodes = [];
    this.currentBanner = 0;

};

// ADD NEW BANNER
Banner.prototype.add = function(bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
    this.aNodes[this.aNodes.length] = new Node(this.obj +"_"+ this.aNodes.length, bannerType, bannerPath, bannerDuration, height, width, hyperlink);
};

// Node object
function Node(name, bannerType, bannerPath, bannerDuration, height, width, hyperlink) {
    this.name = name;
    this.bannerType = bannerType;
    this.bannerPath = bannerPath;
    this.bannerDuration = bannerDuration;
    this.height = height
    this.width = width;
    this.hyperlink= hyperlink;
//  alert (name +"|" + bannerType +"|" + bannerPath +"|" + bannerDuration +"|" + height +"|" + width + "|" + hyperlink);
};

// Outputs the banner to the page
Banner.prototype.toString = function() {
    var str = ""
    for (var iCtr=0; iCtr < this.aNodes.length; iCtr++){
        str = str + '<span name="'+this.aNodes[iCtr].name+'" '
        str = str + 'id="'+this.aNodes[iCtr].name+'" ';
        str = str + 'class="m_banner_hide" ';
        str = str + 'bgcolor="#FFFCDA" ';   // CHANGE BANNER COLOR HERE
        str = str + 'align="center" ';
        str = str + 'valign="top" >\n';
        if (this.aNodes[iCtr].hyperlink != ""){
            str = str + '<a href="'+this.aNodes[iCtr].hyperlink+'">';
        }

        if ( this.aNodes[iCtr].bannerType == "FLASH" ){
            str = str + '<OBJECT '
            str = str + 'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" '
            str = str + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" '
            str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
            str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
            str = str + 'id="bnr_'+this.aNodes[iCtr].name+'" '
            str = str + 'ALIGN="" '
            str = str + 'VIEWASTEXT>'
            str = str + '<PARAM NAME=movie VALUE="'+ this.aNodes[iCtr].bannerPath + '">'
            str = str + '<PARAM NAME=quality VALUE=high>'
            str = str + '<PARAM NAME=bgcolor VALUE=#FFFCDA>'
            str = str + '<EMBED ';
            str = str + 'src="'+this.aNodes[iCtr].bannerPath+'" '
            str = str + 'quality=high '
//          str = str + 'bgcolor=#FFFCDA '
            str = str + 'WIDTH="'+this.aNodes[iCtr].width+'" '
            str = str + 'HEIGHT="'+this.aNodes[iCtr].height+'" '
            str = str + 'NAME="bnr_'+this.aNodes[iCtr].name+'" '
            str = str + 'ALIGN="center" '
            str = str + 'TYPE="application/x-shockwave-flash" '
            str = str + 'PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">'
            str = str + '</EMBED>'
            str = str + '</OBJECT>'
        }else if ( this.aNodes[iCtr].bannerType == "IMAGE" ){
            str = str + '<img src="'+this.aNodes[iCtr].bannerPath+'" ';
            str = str + 'border="0" ';
            str = str + 'height="'+this.aNodes[iCtr].height+'" ';
            str = str + 'width="'+this.aNodes[iCtr].width+'">';
        }

        if (this.aNodes[iCtr].hyperlink != ""){
            str = str + '</a>';
        }

        str += '</span>';
    }
    return str;
};

// START THE BANNER ROTATION
Banner.prototype.start = function(){
    this.changeBanner();
    var thisBannerObj = this.obj;
    // CURRENT BANNER IS ALREADY INCREMENTED IN cahngeBanner() FUNCTION
    setTimeout(thisBannerObj+".start()", this.aNodes[this.currentBanner].bannerDuration * 1000);
}

// CHANGE BANNER
Banner.prototype.changeBanner = function(){
    var thisBanner;
    var prevBanner = -1;
    if (this.currentBanner < this.aNodes.length ){
        thisBanner = this.currentBanner;
        if (this.aNodes.length > 1){
            if ( thisBanner > 0 ){
                prevBanner = thisBanner - 1;
            }else{
                prevBanner = this.aNodes.length-1;
            }
        }
        if (this.currentBanner < this.aNodes.length - 1){
            this.currentBanner = this.currentBanner + 1;
        }else{
            this.currentBanner = 0;
        }
    }


    if (prevBanner >= 0){
        document.getElementById(this.aNodes[prevBanner].name).className = "m_banner_hide";
    }
    document.getElementById(this.aNodes[thisBanner].name).className = "m_banner_show";
}

OK: bannerType, bannerPath, bannerDuration, height, width, hyperlink

You're need to add something like:

echo "banner1.add('text', '{$row['ArtistDate']}',xxx,xxx,xxx,'{$row['ImgLink']}')";

Is the banner path the ArtistDate?
The code suggests that bannerType needs to be 'FLASH' or 'IMAGE' and not 'text'
Replace xxx with suitable values.

Sorry to sound dismissive, but this carousel looks pretty limited. It doesn't seem to allow for added text / html for the purposes you need. I may be wrong, js isn't my strong point.

You could always adapt it though - add another parameter to the add function and incorporate the ensuing variable as html.