Discussion | Issues | Feedback | Javascript Multitransition Banner

Thank you for this great slider! Very clean and wonderful add-on!

Hello, wonderful work! I was wondering if it's possible to make the thumbnails vertical on the left side?

Hello! Thank you for the banner. I really like it but I have a conflict with another program and it is not displaying properly. Can you help me please? I am using dreamweaver 4. The other program is a drop menu and it is DHTML (this is javascript). If I remove the drop menu the banner still does not display correctly. The foot banner moves up to the middle portion of the banner. What do I need to change in the settings of the banner so it does not display the footer in the middle of the banner? Thank you for any help you can give for this issue!

is there a way to make each feature into a rotating banner?

Installation instruction is not in source file. how I should install it in general website?

How do I install this? There are no instructions just a bunch of files.

Hello,
I am trying to implement this multitransitional banner onto my website using dreamweaver but I can not find the installation instructions. Can you please re release them?

Thanks for all your effort , i am going to try on my website

I couldn't find the installation file. Can someone tell me where to find it?

How could I make the rotating image a hyper link?

can I give each "large" image a hyperlink? like

Hi. Tried and i think it works on my site but not as expected.. but still okay. One qn tho.. I added it to my website through a php script but after adding, the script when reloaded turns into a collation of assorted images of my webpage and i can no longer edit the script as before. Tried adding your script a few times but after saving and reopening it, problem returns..

I like the helpful information you provide in your articles. I’ll bookmark your blog and check again here regularly. I’m quite certain I will learn plenty of new stuff right here! Good luck for the next!

Hi, Very nice rotator banner. Very easy to use. but I would like to include hyperlinks on the Larger rotating images. Is that possible? and how can I achieve it? Thanks

Hi there, the download links on http://www.encodez.com/blog/2009/06/javascript-multitransition-banner only link to v 1.0.0. Also the demo seems to be 1.0.0 with the last picture showing on start up. Where can we get v 1.1.0?

rrko

Hello,

First of all, your scripts are great!!! However, I have been having some trouble with your script conflicting with another javascript function on my website. I will list both scripts and can you tell me how to eliminate both scripts from conflicting.

YOUR SCRIPT
<script language="javascript" type="text/javascript">
 
/********************************************************************************|
# 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 <a href="http://www.encodez.com/">http://www.encodez.com/</a> |
# 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 : <a href="http://www.encodez.com/">http://www.encodez.com/</a> |
# Contact : muneer AT encodez DOT c o m |
#-------------------------------------------------------------------------------|
*
*
*
* 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 = 300;
 
/*
* 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 = "right";
 
/*
* 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("img/frontBanner/large/slideshow1.jpg", "img/frontBanner/large/slideshow2.jpg", "img/frontBanner/large/slideshow3.jpg", "img/frontBanner/large/slideshow4.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("");
 
/*
* 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 = 3000;
 
/*
* 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 = false;
 
/*
* 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 = false;
 
/*
* Enable/disable description in footer
*/
var encEnableDescription = false;
 
/*
* 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.
*/
 
/*
* 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[encImg.length-1].src + ")");
encTransformBanner(0);
 
if(encEnableFooter)
{
var tmpCellWidth = Math.floor(encBannerWidth/encNumOfImages);
var tmpLastCellWidth = tmpCellWidth + (encBannerWidth%encNumOfImages);
 
var footerContents = "<table cellpadding='0' cellspacing='0' width='" + encBannerWidth + "' align='center'><tr>";
for(i=0; i<encNumOfImages; i++)
{
if((i+1) == encNumOfImages)
footerContents += "<td class='footerCell' width='" + tmpCellWidth + "'>";
else
footerContents += "<td class='footerCell' width='" + tmpLastCellWidth + "'>";
 
footerContents += "<div class='imgBgDiv_i'><div id='thumbDiv_" + i + "' class='imgDiv' style='background:url(" + encThumbs[i].src + ") 0px 0px no-repeat;'></div></div>";
footerContents += "<ul id='footerContents_" + i + "'>";
footerContents += "<li class='footerTitle'></li>";
footerContents += "<li class='footerDesc'></li>";
footerContents += "<li class='footerLink'></li>";
footerContents += "</ul>";
footerContents += "</td>";
}
footerContents += "</tr></table>";
$("#bannerFooterNav").html(footerContents);
$("#bannerFooter").fadeTo("fast", 0.4);
showFooter();
$(".imgDiv").fadeTo("fast", 0.75);
}
 
 
if(! encDisableTextsAll && encEnableFooter)
{
for(i=0; i<encNumOfImages; i++)
{
$(".footerTitle:eq(" + i + ")").html(encBannerTexts[i][0]);
if(encEnableDescription) $(".footerDesc:eq(" + i + ")").html(encBannerTexts[i][1]);
if(encBannerTexts[i][2] != "" & encEnableReadMore)
{
$(".footerLink:eq(" + i + ")").html("<div class='bttnMore'><a href='" + encBannerTexts[i][2] + "'>&nbsp;</a></div>");
}
}
}
 
if(encEnableThumbImageLink && encEnableFooter)
{
for(i=0; i<encNumOfImages; i++)
{
link = encBannerTexts[i][2];
$("#thumbDiv_" + i).attr("onclick", "window.location.href='" + link + "'")
}
}
 
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(0)", encAutoRotateTimeout);
}
}
 
showFooter=function()
{
$("div#bannerFooter").animate({ width: '900px', opacity: '0.5' }, 'slow');
}
 
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});
}
}
 
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<size; i++)
{
tmpArray[i] = new Image;
tmpArray[i].src = images[i];
}
return tmpArray;
}
 
</script>

OTHER SCRIPT

<script language="javascript" src="inc/jquery-1.3.2.js"></script>
<script language="javascript" src="inc/jquery.pngFix.js"></script>
<script language="javascript" src="inc/jquery.backgroundPosition.js"></script>
<script language="javascript" src="inc/jquery.easing.compatibility.js"></script>
 
<script language="javascript" type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

Below is how I am preloading images for the other script:

Do I do the samething for your script to make it function???? Please help and reply.

Al

Great utility but would like to able to add a hyperlink to the image as it rotates to link to a page with more information about the event. Is this possible?

Where in the code do I insert the actual hyperlinks? What is the proper format? I have tried several things without success.

Thanks.

Is there a way to add the ability for viewers to start and stop the banner rotation? (such as if a viewer wanted to study info in one of the banners) It could be a separate button below the rotating banner or a link in the banners near the bottom.
This is a GREAT rotating banner code. I needed something for my mobile page that seemed like a Flash banner. Thanks for your time to create it.

I love it. Don't it up yet on the net, only on my local machine while I play with it. I've got it up and testing in Firefox but doesn't seem to work with Safari. Is this just a problem with the way I've got it loaded or is it not compatible with Safari.

Thanks

The link to download version 1.1.0 only downloads the old version that displays the last page upon startup. How can I fix that?

Also, is there any way to reposition the thumbnails? I want to either display them to the right of the rotating image (I'm using a narrower image) or on the bottom, but closer together without text? I can turn off the text and the more button, but I can't reposition the thumbnails, except as an inline group. Everything in the js files indicates block display, but they display inline.

Great banner! Is there a way I can get some of the links to go to target _self or target _blank? Thanks!

I love what you did, however when i go beyond four images the auto transition does not seem to work as well the thumbnail hover. I know the recommended is four images, so where can i tweak the code to accommodate more than 4 images. I'm baffled for days so i have to ask. Thanks

Just nice! Liket it a lot! Thank to share, really thanks!

Hello and great banner... but I have one issue... the same issue that the poster http://www.encodez.com/comment/492#comment-492 had. When I click on an image in the banner, it opens multiple tabs depending on how many times it has rotated. Is there a fix for this? Thanks!

This is the page I'm working on... http://darkfyreent.com/demo.htm
I'm still customizing it, but if you mouse over a couple of the thumbnails then click on any image, it will open several tabs...

Thank you very much! You're great!

I changed the dimensions of the banner, both width and height, and managed to make it work all except where the #bannerFooter div is displayed. I can't figure out where to control the positioning. Other divs are absolute; easy. But this one is relative. It doesn't line up with my #bannerFooterNav dive now.

ok, i like

The Transition banner is great, it would be amazing if we could take out the <table> format and replace it with something more search engine friendly, maybe <div>'s using <ul> and <li>. I have been trying to work through this but progress as been slow. Figured I can't be the first person to try and do this. Any help greatly appreciated.

This banner is great, it would be amazing if the HTML and CSS formatting was done using something besides the table tag. I started looking at ways to do this using div ul and li tags. Any thoughts or suggestions?

This banner is amazing... Is it possible to integrate this banner into wordpress???
thanks