[Brandon]

First create the ads or banner images you want to use. For this example I will create 7 ads, to keep it easy name them ad1.png, ad2.png, etc.
Place the ads in the Generated Application Files directory in a new directory called ads/

You will need to add an image container you want to hold the banner or ad image.
For ease sake, name this adImage.

Set the onClick action to Run Javascript with the following:

window.open(adurl, '_blank');

This will open the ad url in a new window.

Run your app in the Test Center to continue.

In the test center you will want to edit the source code.

Find the section of the document loaded:
Below:
/**
* Called when document is loaded.
*/

first as a variable that holds the add number:

 var adNumber;

This should be just above the function. You can place it inside for this sample, but since I may want to use it outside later Im keeping it out.

Inside the function we want to create a random number based on the number of ads we have, which here is 7.

adNumber = Math.floor((Math.random()*7)+1);

Next we want to check which number was called and load the ad image and url for that ad.

  if (adNumber == 1){$('#m1-index-adImage').attr('src', 'ads/ad1.png');adurl='http://flickr.com'}
  if (adNumber == 2){$('#m1-index-adImage').attr('src', 'ads/ad2.png');adurl='http://msn.com'}
  if (adNumber == 3){$('#m1-index-adImage').attr('src', 'ads/ad3.png');adurl='http://yahoo.com'}
  if (adNumber == 4){$('#m1-index-adImage').attr('src', 'ads/ad4.png');adurl='http://google.com'}
  if (adNumber == 5){$('#m1-index-adImage').attr('src', 'ads/ad5.png');adurl='http://genuitec.com'}
  if (adNumber == 6){$('#m1-index-adImage').attr('src', 'ads/ad7.png');adurl='http://youtube.net'}
  if (adNumber == 7){$('#m1-index-adImage').attr('src', 'ads/ad7.png');adurl='http://cnn.com'}

Thats it. You should have a working rotating ad system.
Enjoy

[fcodonlucas]

Hi CincyPlanet…. I’m very interested how you did it, you can make an example, to see it ….. I want to place the ads myself as iAds size (iAd banner) … I would greatly appreciate it .. I hope your answer thanks …

[Brandon]

It wouldnt let me attach a sample file so try this.
1. Create a new form, save this form as adBanners
2. Add an image to the form, click the image and change the id to: adImage
3. Add an html widget to the form
4. Double click the html widget to add the code. When open add the following code to the html widget.
5. Run the form.

<script>
var adNumber;
adNumber = Math.floor((Math.random()*5)+1);
if (adNumber == 1){$('#m1-adBanners-adImage').attr('src', 'http://www.genuitec.com/images/about/about_new_01a.jpg');adurl='http://flickr.com'}
  if (adNumber == 2){$('#m1-adBanners-adImage').attr('src', 'http://www.genuitec.com/images/products/products_new_03.jpg');adurl='http://msn.com'}
  if (adNumber == 3){$('#m1-adBanners-adImage').attr('src', 'http://www.genuitec.com/images/products/products_new_08f.jpg');adurl='http://yahoo.com'}
  if (adNumber == 4){$('#m1-adBanners-adImage').attr('src', 'http://www.genuitec.com/images/products/products_new_06.jpg');adurl='http://google.com'}
  if (adNumber == 5){$('#m1-adBanners-adImage').attr('src', 'http://www.genuitec.com/images/products/products_new_07.jpg');adurl='http://genuitec.com'}

</script>

That should be all you need to get started.

[fcodonlucas]

thanks cincyplanet, but still do not understand :(, I’m new to this but I want to know for my project I have….. I hope you can help me… Can you save and send the form?

[Brandon]

I had to make a few changes to the code to make it work consistently so here is a project file:
http://cincyplanet.com/mobione/files/adBanners.mobi

[fcodonlucas]

Hi cincyplanet…. thanks for the file… just one thing, it is possible that if I am in the same window, the banners are changed automatically every 10 or 20 seconds… such as iAds, think you can do it, please …. but what you have done is marvelous, again thank you very much …

another question, my banners must be on a server?

[Brandon]

@fcodonlucas
I have updated the file to include a timer function, you can set the interval at the top of the script.

The images do not need to be on the server, you can use a local file by changing the src of the image to the path.

[fcodonlucas]

hi cincyplanet…many thanks for the code and the example … works perfectly … this is how I expected for my project … I really appreciate cincyplanet …. your are the rock 🙂

[Brandon]

Glad to help.

[fcodonlucas]

hello cincyplanet…. this code can work for native app or only wep app…. thanks for your help…

[fcodonlucas]

I will donate for your Mobione Code Cheatsheet…. very good job you done for us…. maybe on future need more help 🙂

sorry for my english 🙁

[fcodonlucas]

Hi Cincyplanet… only one question…. do you think the random images do not repeat after finish all images…can yoo send the code for that… please…

[Author]

Posts