jQuery Banner Rotator

[♥kymation]

This addon provides an automated banner rotator using banners loaded by the stock osCommerce banner manager. Banners are displayed for a specified time before fading to the next banner. There is a control panel (bottom right of the banners, but repositionable) that stops and restarts the rotation as well as allowing the selection of individual banners. There is no limit to the number of banners that can be rotated. Banner size is adjustable in the stylesheet. Each banner can link to any osCommerce page, and Title/Alt text can be added individually.

 

Code is here.

Edited June 28, 2010 by kymation

[♥bruyndoncx]

Hi Jim,

 

Thanks for the contribution, I was just checking the contributions yesterday for such a script ... great timing !

 

I have a multi-lingual site, and have banners in different groups per language.

Your contribution really lays out the basics but I'd need to modify it to allow for different banner groups.

 

Do you have a particular view on how it is best to go about this ?

[♥kymation]

I would modify the osCommerce Banner Manager to allow for languages. You'll need a languages_id column in the banners database table to set the language. Then just add the check for that field to all the queries that fetch banners.

 

Regards

Jim

[♥bruyndoncx]

ofcourse, you are correct, that is the proper way to do it.

 

Carine

[♥kymation]

I've uploaded Version 1.1 to the Addons section. This fixes the missing display and click counts for the banners used by the rotator, and includes the file missing from the first version.

 

It also now includes language-dependent banners as suggested by Carine. This latter is really an osCommerce bug. Somebody needs to fix this in the core code. Ah well.

 

Regards

Jim

[2fix4u]

I've uploaded Version 1.1 to the Addons section. This fixes the missing display and click counts for the banners used by the rotator, and includes the file missing from the first version.

 

It also now includes language-dependent banners as suggested by Carine. This latter is really an osCommerce bug. Somebody needs to fix this in the core code. Ah well.

 

Regards

Jim

 

Thanks for that.

got some Problems with this contrib.

Unfortunately the rotator will not be displayed, the only thing displayed is the small "transBlack75.png". Perhaps some jQuery probs?!

BTW the function

tep_update_banner_display_count( $banner['banners_id'] );

causes errors too.

 

Any ideas?

Thanks

Harry

[♥kymation]

What errors? I'm not psychic.

 

Regards

Jim

[2fix4u]

What errors? I'm not psychic.

 

Regards

Jim

No errors are displayed, only the page stop's loading at that point.

Normal page loading after commenting out that line, but still the display Problem mentioned above.

 

Regards

Harry

[♥kymation]

Then look in your server's error logs for the error message, or change the level of error reporting in application_top.php to error_reporting (E_ALL);. You can also install the KISS Error Handling & Debugging Addon to get even more information.

 

This code has all been tested and proven working on my server, so I can't do anything without some information on why it's failing on yours.

 

Regards

Jim

[2fix4u]

Then look in your server's error logs for the error message, or change the level of error reporting in application_top.php to error_reporting (E_ALL);. You can also install the KISS Error Handling & Debugging Addon to get even more information.

 

This code has all been tested and proven working on my server, so I can't do anything without some information on why it's failing on yours.

 

Regards

Jim

Sorry :-" , problem solved, have forgotten that i have disabled, long time ago, the Banners completely by commenting out the lines in aplication_top.php

require(DIR_WS_FUNCTIONS . 'banner.php');
 tep_activate_banners();
 tep_expire_banners();

 

But the rotator will still not be displayed, here is a screenshot:

[2fix4u]

Problem completely solved with:

jQuery.noConflict();

[♥kymation]

Beat me to it. Thanks for posting the fix; maybe that will help someone else with the same problem.

 

Regards

Jim

Edited July 1, 2010 by kymation

[zediks]

I can see the banner rotator in my admin

I added banners to banner manager, but the banners don't show up in the index

 

Modifications I ve made manually (I have modified files)

 

Filesnames - check

added define( 'FILENAME_BANNER_ROTATOR', 'banner_rotator.php' );

 

index - check

addes: (between the head tags)

<?php // Start Banner Rotator; ?>

<script type="text/javascript" src="includes/functions/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="includes/functions/bannerRotator.js"></script>

<script type="text/javascript">

$(document).ready(function(){

bannerRotator('#bannerRotator', 500, 4000);

});

</script>

<?php // End Banner Rotator; ?>

 

--------------- and INSERT Before <?php include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>----------------

<?php include( DIR_WS_MODULES . FILENAME_BANNER_ROTATOR ); ?>

 

 

I had problems with the Sql injection tough so I renamed the numbers

 

(168, 'Banner Order', 'BANNER_ORDER', 'banners_id', 'Order that the Banner Rotator uses to show the banners.', 1661, 10, NULL, '2010-06-25 17:25:11', NULL, 'tep_cfg_select_option(array(''banners_id'', ''rand()''), '),

(169, 'Banner Rotator Group', 'BANNER_ROTATOR_GROUP', 'rotator', 'Name of the banner group that the Banner Rotator uses to show the banners.', 1661, 5, NULL, '2010-06-25 17:25:11', NULL, ''),

(170, 'Banner Rotator Max Banners', 'MAX_DISPLAY_BANNER_ROTATOR', '4', 'Maximum number of banners that the Banner Rotator will show', 1661, 15, '2010-06-27 01:38:54', '2010-06-25 17:25:11', NULL, '');

 

to

 

(268, 'Banner Order', 'BANNER_ORDER', 'banners_id', 'Order that the Banner Rotator uses to show the banners.', 1661, 10, NULL, '2010-06-25 17:25:11', NULL, 'tep_cfg_select_option(array(''banners_id'', ''rand()''), '),

(269, 'Banner Rotator Group', 'BANNER_ROTATOR_GROUP', 'rotator', 'Name of the banner group that the Banner Rotator uses to show the banners.', 1661, 5, NULL, '2010-06-25 17:25:11', NULL, ''),

(270, 'Banner Rotator Max Banners', 'MAX_DISPLAY_BANNER_ROTATOR', '4', 'Maximum number of banners that the Banner Rotator will show', 1661, 15, '2010-06-27 01:38:54', '2010-06-25 17:25:11', NULL, '');

 

also added to stylesheet.css

 

/* Start Banner Rotator */

#bannerRotator {

width: 468px; /* Banner width */

height: 50px; /* Banner height */

overflow: hidden;

position: relative;

}

 

#bannerRotator ul {

list-style: none;

padding: 0;

position: relative;

}

 

#bannerRotator ul li {

display: none;

width: 728px; /* Banner width */

height: 90px; /* Banner height */

position: absolute;

top: 0px;

left: 0px;

}

 

#bannerNav {

position: absolute;

right: 15px; /* Distance from the right side of the controls box to the right edge of the banner */

bottom: 15px; /* Distance from the bottom of the controls box to the bottom of the banner */

background: url(images/icons/transBlack75.png) repeat 0 0; /* Controls box background image */

padding: 5px 5px 5px 10px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

 

#bannerNav a {

margin: 3px 10px 0 0 ;

height: 10px;

width: 10px;

display: block;

background: url(images/icons/dotDark.png) no-repeat 0 0; /* Controls Button image (Inactive) */

float: left;

}

 

#bannerNav a.active {

background-image: url(images/icons/dotLight.png); /* Controls Button image (Active) */

}

 

#bannerNav span.pause, #bannerNav span.play {

cursor: pointer;

height: 15px;

width: 15px;

display: block;

background: url(images/icons/pause.png) no-repeat 0 0; /* Controls Pause icon */

float: left;

}

 

#bannerNav span.play {

background-image: url(images/icons/play.png); /* Controls Play icon */

}

 

.divider-tall {

clear: both;

height: 13px;

}

/* End Banner Rotator */

Edited July 1, 2010 by zediks

[♥kymation]

Did you upload the Javascript files to the correct location? Did you also upload the image files? Also, the location that you pasted the include() code in index.php may not work. Try putting it where it is in the distribution and see if it works there before moving it where you want it to be.

 

Regards

Jim

[zediks]

I drag and dropped the catalog folder directly to my root

 

as for the include it's hard to say because my index doesn't look the same at all the in the distro

[♥kymation]

Are you certain that you have osCommerce 2.2RC2a? Are you using a third-party template?

 

Regards

Jim

[zediks]

would it work if I enable the javascript section

 

<?php // Start Banner Rotator; ?>

<script type="text/javascript" src="includes/functions/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="includes/functions/bannerRotator.js"></script>

<script type="text/javascript">

$(document).ready(function(){

bannerRotator('#bannerRotator', 500, 4000);

});

</script>

<?php // End Banner Rotator; ?>

 

in the header?

[zediks]

2.2 and indeed 3th party temp

 

FYI shop.thevine.be

Edited July 1, 2010 by zediks

[♥kymation]

The Javascript references in the header must be there and must be enabled. It appears that your template is using frames. This is not recommended for a variety of reasons. You will need to put the Javascript references in the head of the frame page that contains your banner rotator.

 

Regards

Jim

[zediks]

that would be the index then

This is why I placed the include in the index.php file because I wanted it above the new products frame

 

 

 

<?php include( DIR_WS_MODULES . FILENAME_BANNER_ROTATOR ); ?>

<?php include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

 

and placed the java in the head

[♥kymation]

Your Javascript is not in that file. Look at the page source for that frame in your browser.

 

Regards

Jim

[bhbilbao]

Thanks Jim,

 

great and usefull contribution!

 

But...

 

1.How to remove the play-stop button over the images??? (I want to remove the button, only images)

 

2.In banner manager if I insert a link url, then clicking in rotator always goes to the index page.

 

3.How lo align the diferent images of the rotator banner to the center??? (With diferent images of diferent sizes they are aligned to the left)

 

Regards.

[♥kymation]

1. Don't do that; you'll annoy your customers, and some may leave.

 

2. Not on my test site. Look at the URL in your browser -- is it correct? This function uses the osCommerce redirect function; have you made any changes to that? Are you using a URL rewriter?

 

3. The images have to float left for this to work. I recommend that you make all of them the same size. You can always add to the image width with a graphics program.

 

Regards

Jim

[bhbilbao]

1. ok. is because the stop-play button sometimes stay infront of the text or the price of the banner and hide them. I will try repositing the button to one corner.

2. Yes, using URL rewrite in httaccess. I will remove the htlm links.

3. normaly using clasic 468px × 60px, but for your new contrib I use an extralarge 650px × 80px bann. I don't want to break your new contrib but i think the stop-play button is a nuisance thing. I will try to changing it more transparent.

 

 

Thanks for all.

[♥kymation]

1. Either move the controls or redesign the banners. You can also size the banner box so that the controls sit just below the banner.

 

2. URL rewriters cause a lot of problems. Any decent rewriter should work with the osCommerce redirect code. You should get rid of the rewriter or use one that works properly.

 

3. The buttons were a requirement for me. I find the lack of controls to be extremely annoying. If you really want a rotator without controls, there are plenty of scripts out there that you can use.

 

Regards

Jim