/********************************************************************************| # This copyright notice must be kept untouched in the stylesheet at all times. | # The original version of this script and the associated (x)html | # is available at http://www.encodez.com/ | # Copyright (c) 2009 Encodez Systems. All rights reserved. | # ------------------------------------------------------------------------------| # This script and the associated (x)html may be modified in any | # way to fit your requirements. | # | # DYNAMIC MULTI TRANSITION BANNER | | # Author : MUNEER SAHEED | # Released on : 16 June 2009 | # Version : 1.0.0 | # Website : http://www.encodez.com/ | # Contact : muneer AT encodez DOT c o m | #-------------------------------------------------------------------------------| * * */ /* Spacer Image * Make sure to change this to your own spacer Image (: */ var spacerImage = "http://c-wd.net/img/spacer.gif"; /* Vertical Solutions header Image */ var verticalSolutionsImage = "http://www.recombo.com/Portals/57774/kuno-new-design-images/vertical-solutions.png "; /* Properties * Following properties of can be editable according to * the final result expected. * * width of the banner * If changing this varibale, please do not forget to change * the CSS * I "#bannerTD" * II "#bannerContainer" * III "#bannerFooter" * IV "#bannerFooterNav" */ //~ var encBannerWidth = 960; var encBannerWidth = 920; /* * This peroperty describes how the banner transition will be * The option availbale are * I "slide" - This slides the banner from left to right. * II "slideDown" - This slides the banner from top to bottom. * III "fade" - This makes the banner fade in/fade out. */ var encTransitionType = "fade"; /* * Describes the number of background images and thumbnail images * are there. * Recomended values are 3 or 4 * Can be 1 to max possible according to the width of banner. */ var encNumOfImages = 4; /* * This array contains the path to large version of background images. * Path can be configured according to the user path. * Arrange the images in order. This order will be executed while processing. */ var encImageArray = new Array( "http://recombo.com/Portals/57774/kuno-new-design-images/img_1.jpg", "http://recombo.com/Portals/57774/kuno-new-design-images/img_2.jpg", "http://recombo.com/Portals/57774/kuno-new-design-images/img_3.jpg", "http://recombo.com/Portals/57774/kuno-new-design-images/img_4.jpg", "http://recombo.com/Portals/57774/kuno-new-design-images/img_1.jpg" ); /* * This array contains the path to thumbnail version of background images. * Path can be configured according to the user path. */ var encThumbNailImageArray = new Array( "http://recombo.com/Portals/57774/kuno-new-design-images/img_1.png", "http://recombo.com/Portals/57774/images/slider/img_1.png", "http://recombo.com/Portals/57774/images/slider/img_2.png", "http://recombo.com/Portals/57774/images/slider/img_3.png", "http://recombo.com/Portals/57774/kuno-new-design-images/img_5.png" ); /* * This property describes the transition of the banner. * If it is set to true, the banner will automatically change according to the Timeout * value. The selected transition type will be applied while auto transition. */ var encAutoRotateBanner = true; /* * Transition timeout. */ var encAutoRotateTimeout = 8000; /* * Enable or disable description footer containing thumbnail image. * If this is set to true, the properties "encDisableTextsAll", "encEnableThumbImageLink", * "encEnableDescription", "encEnableReadMore" will not be executed. */ var encEnableFooter = true; /* * Disable all text from the footer * except the thumbnail image. This will make possible to * maximise the number of thumbnail image using variable "encNumOfImages". */ var encDisableTextsAll = false; /* * Enable/disable link for thumbnail click event. */ var encEnableThumbImageLink = true; /* * Enable/disable link for header click event. */ var encEnableHeaderLink = true; /* * Enable/disable description in footer */ var encEnableDescription = true; /* * Enable/disable readmore button in footer. * read more button is described using ".bttnMore" class */ var encEnableReadMore = false; /* * This array contains the contents used in footer. * The sample values can be changed, * the array size can be altered according to the need. * It contains * I Title * II Description * II Link * If wanted to remove the link only for a single item, just remove the value. */ var encBannerTexts = new Array(5); encBannerTexts[0] = new Array(3); encBannerTexts[0][0] = "Contract Management Software"; encBannerTexts[0][1] = ""; encBannerTexts[0][2] = "/contract-management-software/"; encBannerTexts[1] = new Array(3); encBannerTexts[1][0] = "E-Payments & Banking"; encBannerTexts[1][1] = ""; encBannerTexts[1][2] = "/merchant-card-services/"; encBannerTexts[2] = new Array(3); encBannerTexts[2][0] = "Insurance"; encBannerTexts[2][1] = ""; encBannerTexts[2][2] = "/insurance/"; encBannerTexts[3] = new Array(3); encBannerTexts[3][0] = "Wealth Management"; encBannerTexts[3][1] = ""; encBannerTexts[3][2] = "/wealth-management/"; //~ encBannerTexts[4] = new Array(3); //~ encBannerTexts[4][0] = "Client Enrollment"; //~ encBannerTexts[4][1] = "Learn more >"; //~ encBannerTexts[4][2] = "/client-online-enrollment/"; /* * STOP ! * WARNING !!!! * pLease do not change the below variables. * Thosea are private variables and used for runtime configuration */ var encBusy = false; var encCurrentBanner = -1; var encImg = new Array(encNumOfImages); var encThumbs = new Array(encNumOfImages); /* * THANK YOU for leaving them. */ /* * The "encLoadBanner()" is the main function to start the banner. * It can be placed inside "$(document).ready(function()" jquery document ready * funciton or inside the "onload=function()" javascript document onload function. * both will work. The advantage of placing inside "onload=function()" is, * the banner image will be loaded after the complete website rendered in to browser. */ onload=function() { encLoadBanner(); } encLoadBanner = function(){ encImg = encPreloadImages(encImageArray, encNumOfImages); if(encEnableFooter){ encThumbs = encPreloadImages(encThumbNailImageArray, encNumOfImages); } $("#bannerBody").html(""); $("div#bannerContainerCover").css("background-image", "url(" + encImg[0].src + ")"); encTransformBanner(0); if(encEnableFooter){ var tmpCellWidth = Math.floor(encBannerWidth/encNumOfImages); var tmpLastCellWidth = tmpCellWidth + (encBannerWidth%encNumOfImages); var footerContents = ''; for(i=0; i"; }else{ footerContents += "'; if(i == 0){ footerContents += ''; } } footerContents += "
"; } footerContents += '
'; footerContents += '
'; footerContents += '
  • '; footerContents += '
  • '; footerContents += '
  • '; footerContents += ''; footerContents += '
    		'; footerContents += ''; footerContents += '
    "; $("#bannerFooterNav").html(footerContents); var p = $("#bannerFooterNav").position(); /* alert("Left: " + p.left + ", Top: " + p.top); $("#bannerFooter").fadeTo("fast", 0.4); */ showFooter(); $(".imgDiv").fadeTo("fast", 0.75); } if(! encDisableTextsAll && encEnableFooter){ for(i=0; i" + encBannerTexts[i][0] + "") if(encEnableDescription) $(".footerDesc:eq(" + i + ")").html("" + encBannerTexts[i][1] + ""); if(encBannerTexts[i][2] != "" & encEnableReadMore){ $(".footerLink:eq(" + i + ")").html("
     
    "); } } } } if(encEnableFooter){ a=0; $(".imgDiv").each(function(){ var ids = a; $(this).mouseover(function(){ $(this).fadeTo("fast", 1); var cssObj = {"margin-top": "0px", "margin-bottom": "2px"} $(this).css(cssObj); encBusy = true; encTransformBanner(ids); $(document).pngFix(); }) a++; }).mouseout(function() { $(this).fadeTo("fast", 0.75); var cssObj = {"margin-top": "2px", "margin-bottom": "0px"} $(this).css(cssObj); encBusy = false; $(document).pngFix(); }); $(document).pngFix(); } if(encAutoRotateBanner){ var tmpBannerTimer = setTimeout("encAutorotate(-1)", encAutoRotateTimeout); } } showFooter=function(){ $("div#bannerFooter").animate({ width: '960px', opacity: '0.5' }, 'slow'); } encTransformBanner = function(ids){ encCurrentBanner = ids; var currentBg = $("div#bannerContainerCover").css("background-image"); if(encEnableHeaderLink){ $("div#bannerBody").html(''); } $("div#bannerContainer").css("background-image", currentBg); var cssObj = {"opacity": "0.1", "background-repeat": "no-repeat", "background-image": "url(" + encImg [ids].src + ")"} $("div#bannerContainerCover").css(cssObj); if(encTransitionType == "slide"){ $("div#bannerContainerCover").css("background-position", "-50px 0"); $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600}); }else if(encTransitionType == "slideDown"){ $("div#bannerContainerCover").css("background-position", "0 -50px"); $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600}); }else{ $("div#bannerContainerCover").stop().animate({opacity:"1"}, {duration:1000}); } } encAutorotate = function(bannerID){ if(encCurrentBanner > -1){ bannerID = encCurrentBanner; encCurrentBanner = -1; } if(!encBusy){ if(bannerID < (encNumOfImages-1) && bannerID >= 0){ bannerID++; }else{ bannerID =0; } encTransformBanner(bannerID); } var tmpBannerTimer = setTimeout("encAutorotate(" + bannerID + ")", encAutoRotateTimeout); } encPreloadImages = function(images, size){ var tmpArray = new Array(size); for(i=0; i