Adding link to Banner Image (Multi-transition Banner)
I received comments and email from many of our visitor requesting “How to make the large image as clickable link?” under the post Javascript Multitransition Banner released. I am writing this post in response to them.
To create a link on the large image of the banner,, we need to alter the function encTransformBanner = function(ids)
Add the following code at the end of the function
1 2 3 4 | $("div#bannerContainer").css("cursor", "pointer"); $("div#bannerContainer").click(function() { window.location.href = encBannerTexts[ids][2]; }); |
The final code will looks like following for the function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | encTransformBanner = function(ids) { encCurrentBanner = ids; var currentBg = $("div#bannerContainerCover").css("background-image"); $("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}); } $("div#bannerContainer").css("cursor", "pointer"); $("div#bannerContainer").click(function() { window.location.href = encBannerTexts[ids][2]; }); } |
Cool. Thats it. 
very nice!!