The following code was used to have several images or a flash animations rotate inside a block.
I wanted to have many images stored in the database and have them appear inside a side block without refreshing the page, so that visitors would be exposed to multiple ads without having to refresh the page and while they were reading the content of the page.
As you can see in the code, I call the style and javascript files externally. I created a cck content type to store the images and/or flash animations.
After you create the content type using cck module, you can manage your banners using the views module.
This is the code that goes inside the block:
<link rel="StyleSheet" href="/themes/vlaff/mBanner.css" type="text/css" />
<script type="text/javascript" src="/themes/vlaff/mBanner.js"></script>
<script language="javascript">
banner1 = new Banner('banner1');
-->
<?php
$result = db_query("SELECT nid FROM {node} WHERE type = 'content_banner' ORDER BY rand()");
while ($node = db_fetch_object($result)) {
$mynode = node_load($node->nid);
$mypath = "";
foreach ($mynode->files as $filepath){
$mypath = $filepath->filepath;
} ?>
banner1.add("<?= $mynode->field_type[0]['value']; ?>", "/<?= $mypath; ?>", <?= $mynode->field_duration[0]['value']; ?>, <?= $mynode->field_height[0]['value']; ?>, <?= $mynode->field_width[0]['value']; ?>,"<?= $mynode->field_link[0]['value']; ?>");
<?php }?>
document.write(banner1);
banner1.start();
</script>This is the external style sheet:
.m_banner_hide{
display:none;
}
.m_banner_show{
display:block;
}This is the external javascript code:
/////////////////////////////////
// File Name: mBanner.js //
// By: Manish Kumar Namdeo //
/////////////////////////////////
// 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";
}
Thank you! Advertising module is too slow. This code may solve my problem.
Hi Pedro!
I contact you asking about some problem that i face with the banner
rotator.
This script for embedding images or flash content works well - except the
duration set for each banner is off by 1. So setting the duration of the
first banner to 10 seconds actually sets it for the second, etc. I can't
find the fault in the code.
Can you spot the error in the code?
Or is me?
If you can illuminate me, thanks in advance.
Best regards and sorry for my odd english. Norberto
Hello Norberto,
I honestly have not been using this rotator script for a long time now. If I was you I would rather use "views rotator" module which is a lot easier to set up and configure.
First of all, thanks for reply.
Some hours ago, i found a hack that fix the problem.
If you have to use, here the part that you must change:
// START THE BANNER ROTATION
Banner.prototype.start = function(){
var thisBannerObj = this;
setTimeout(function(){ thisBannerObj.start()}, this.aNodes[this.currentBanner].bannerDuration * 1000);
this.changeBanner();
}
I will take a look at the views rotator!
See you, and, once again, thanks!
Norberto
Post new comment