The jQuery mb.components family is growing up and a new tool to zoom images has been added.

I hope you like it and you enjoy it!

Here is the component page where you’ll find links to the demo page, to the download file and to the doc page:

http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-zoomify/

“Hunt for customers on the web and duel with other agencies.
Live the life of a talented and cursed visionary creative.”

This was the last think we had to do before the Adslife game’s launch.
Adslife is a web based game, pure HTML, where you compete with others using your creativity instead of guns.
All your winning works are visible on your Adslife public page and your masterpieces will be placed at the Adslife Museum of Modern Advertising.

So take a look and play with your creativity!

Visit Adslife now!

For reviewers: Here you can find the press kit and all what you need for your Adslife review:

http://adslifegame.com/applications/adslife/site/adslife-presskit.jsp

This is a horrible hack that works beautifully (’till next Apple iOs update).

It was a while that we where looking for a background audio solution for our Adslife browser game when played on iPad or other iOs devices. Apple’s policy about audio and video autoplay in iOs browser is to deny this feature.
After several failed attempts I figured out a simple hack that makes it possible to call  directly the source URL of audio files and play them on the HTML page load.
I first noticed that Safari on iOs plays automatically a mp3 file (or even mp4: videos!) if it is directly called as a URL.
Then, why not include a hidden iframe in the page pointing to the audio file to load and play it once the page and iframe are loaded?

It works!
Once you load the page, just after buffering the mp3, the audio starts playing!

Here is the javascript code:

var isiOs = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i));

function bgAudio(opt){
if (isiOs){

var ifr=document.createElement("iframe");
ifr.setAttribute('src', opt.mp3);
ifr.setAttribute('id', "bgAudio");
ifr.setAttribute('width', '0');
ifr.setAttribute('height', '0');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr)

} else{

var audio=document.createElement("audio");
audio.setAttribute("id","bgAudio");
var mp3Source= document.createElement("source");
mp3Source.setAttribute('src', opt.mp3);
var oggSource=document.createElement("source");
oggSource.setAttribute('src', opt.ogg);

audio.style.display="none";

audio.appendChild(mp3Source);
audio.appendChild(oggSource);

document.body.appendChild(audio);

audio.load();
audio.volume=0.6;
audio.play();
}
}
window.onload = function() {
bgAudio({mp3:"http://dl.dropbox.com/u/1976976/segreteria.mp3", ogg:"http://dl.dropbox.com/u/1976976/segreteria.ogg"});
};

function stopBgndAudio(){
var el= document.getElementById("bgAudio");
document.body.removeChild(el);
}

And here is a demo page.

Actually I tested it on iOs 4.3.5 but I’m quite sure it works on previous versions too.
This hack does not solve the other limitation imposed by Apple on all iOs devices: Play two audios at once .
We can’t have everything in this life…

Hope this is helpful – and that you’ll play Adslife

The new Youtube API allow developers to invoke a chrome-less AS3 player and use a javascript API to build our own controls, we have almost all the controls available: player.playVideo(), player.pauseVideo(), player.setVolume(), player.mute(), player.unMute(), player.getVideoStartBytes(), player.getVideoBytesTotal(), player.getVideoBytesLoaded(), player.getCurrentTime(), player.getDuration() … All we need to make a custom and customizable control tool for our movie player.

Going on developing it, a great idea was growing in me… Why not using any movie from Youtube  as background of a website page instead of images…
I sow a site (from http://jquery14.com) that uses a movie as background with a really nice effect (http://insideccs.com/#/before_getting_in/degree/). This is what I was thinking at.

And how to have this movieplayer as background?

Well, of course we can’t set it via CSS; this is not supported. But we can have a DIV with an absolute position containing our embedded chrome-less player  under all the other elements of the body; the EMBED must have the WMODE property set as TRANSPARENT to prevent the movie to be over the rest of the content and it must have WIDTH and HEIGHT set to “100%”.

And this is what my jquery.mb.YTPlayer plug-in can do for you; what you have to do is just insert a line of HTML code into your page, include the js in the head of your page and call the method. All the rest is the plug-in:

In the head:

 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.metadata.js"></script>
 <script type="text/javascript" src="jquery.mb.YTPlayer.js"></script>

In the body:

<a href="[the youtube video URL]"
   class="movie
   {opacity:.4, isBgndMovie:{width:'1990',mute:false}, ratio:'4/3'}"> [Alternative link] </a>

And the js call:

<script type="text/javascript">
 $(function(){$(".movie").mb_YTPlayer();});
</script>

The plug-in can also be used as alternative Youtube player just removing the  isBgndMovie meta parameter; in that case you can specify the width, the aspect ratio (4/3 or 16/9) and you can customize the controls via CSS.

The advantage you whould have is also that the embed of the player is provided with all the browsers support controls using the swfobject.js.

Take a look at this video:

The jquery.mb.YTPlayer plug in is under development but it will be soon available.

If you are interested on you can download the 1.0rc3 from here.

here is a short video of the forthcoming mb.gallery 2.0 jQuery plugin.

Here is an introductory video of the basic functionalities of Patapage;
Take a look!

mb._menu short video

my youtube channel

Some features of mb.containerPlus

here is a preview of the new site. Enjoy!

At last the production of “Escape from Basecamp”, our last Teamwork promo, is out!

please watch it and leave your comments!