O MEGA
Banner Sequences
Copy and paste the banner sequence codes into your custom header box to trigger
O Mega's built-in sequences. Each sequence has a live preview example.

** If your using a banner animation for RapidWeaver's Photo Album, Movie Album, Blog Page, or Contact Form, you'll want to paste the animation code into your sidebar. Once pasted, highlight your code and select "Format > Ignore Formatting" from Rapidweaver's top menu bar. Your code should then be highlighted in pink.

Sequence 1 - Mega Banner

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 3000);
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 2 - Mega Banner, EC2

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 1500);
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 3 - Mega Banner, Slogan Text

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, .slogan').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".slogan").animate({opacity:1}, 1500);
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 4 - Mega Banner, EC2, Slogan Text

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, .slogan, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 800, function () {
jQuery(".slogan").animate({opacity:1}, 1000);
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 5 - Mega Banner, Slogan Tint & Slogan Text

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, .slogan, .tintIE, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".slogan, .tintIE").animate({opacity:1}, 1000);
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 6 - Mega Banner, EC2, Slogan Tint & Slogan Text

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, .slogan, .tintIE, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 800, function () {
jQuery(".slogan, .tintIE").animate({opacity:1}, 1000);
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 7 - Mega Banner, Slogan Tint & Slogan Text, EC2

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.megaFadeIn, .slogan, .tintIE, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".slogan, .tintIE").animate({opacity:1}, 1000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 500);
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 8 - Mega Banner, Tint Height, Slogan Text

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.tint').addClass("jTintHeight");
jQuery('.megaFadeIn, .slogan').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".jTintHeight").animate({"height":"60px"}, 1000, function () {
jQuery(".slogan").animate({opacity:1}, 1500);
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 9 - Mega Banner, Tint Height, Slogan Text, EC2

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.tint').addClass("jTintHeight");
jQuery('.megaFadeIn, .slogan, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery(".jTintHeight").animate({"height":"60px"}, 1000, function () {
jQuery(".slogan").animate({opacity:1}, 1000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 800);
});
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Sequence 10 - Mega Banner, EC2, Tint Height, Slogan

Click to view a live example.
<script type="text/javascript">

jQuery(function(){
jQuery('.megaHeader').addClass("removeBg");
jQuery('.tint').addClass("jTintHeight");
jQuery('.megaFadeIn, .slogan, #myExtraContent2').css({opacity: "0", visibility: "visible"});
jQuery(window).load(function() {

jQuery(".megaFadeIn").animate({opacity:1}, 2000, function () {
jQuery("#myExtraContent2").animate({opacity:1}, 800, function () {
jQuery(".jTintHeight").animate({"height":"60px"}, 1000, function () {
jQuery(".slogan").animate({opacity:1}, 1000);
});
});
});
});
});

</script>

<div id="myExtraContent1" class="megaFadeIn" style="background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);"></div>

Slideshow Functionality

The Mega Banner was created for jQuery sequences, but in version 1.1 basic slideshow functionality was added.
Here's how it works:

Copy and paste the code below in your custom css box:
#slide1{background-image: url(%pathto(images/editable_images/mega_banner1.jpg)%);}
#slide2{background-image: url(%pathto(images/editable_images/mega_banner2.jpg)%);}
#slide3{background-image: url(%pathto(images/editable_images/mega_banner3.jpg)%);}

Then, copy and paste the code below in your custom html box, you can adjust the milliseconds highlighted in blue:
<script type="text/javascript" src="%pathto(js/jquery.cycle.lite.min.js)%"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){

$('.megaHeader').css('background', 'none');

$('#slideshow').cycle({
fx: 'fade',
pause: 1,
speed: 3000,
timeout: 6000,
delay: -3000
});
});
</script>

<div id="myExtraContent1">
<div id="slideshow">
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>
</div>
</div>

IE page load flicker fix.

.megaHeader, .megaFadeIn, .slogan, #myExtraContent2 {
visibility: hidden;
}
© 2010 NCD THEMES