Javascript Multitransition Banner released
It is pleasure for me to share the codes that I have written for a banner. This is completely using Javascript/jQuery and CSS. Easy to customize and easy to install. Actually I was adopting the design from CISCO and IBM websites. I am not much good in Adobe Flash animation. It is the main reason to build this in Javascript. LOL.
.
Highlits:
- 100% pure Javascript/jQuery
- Fast Loading
- Auto animate banner
- Easy to use link buttons
- Enable or disable any texts
- Easy to integrate with PHP, ASP.NET and any other servers
Demo
Click here to see a demo
Download
Screenshot :
Screenshot 1
.
Screenshot 2
.
Screenshot 3
Installation:
Installation instruction found in source file.
This is not 100% complete. Please give me your feedbacks. I will make any changes for the improvement.
- Use it for free & Please give me a link back if you like.
Bugs & Fixes
.
this is awesome! actually i waz searching a script like this, coz we can use this script in joomla CMS sites..
thnx
Great work and presentation, could this be used for commercial also, and I have other questions about it. Thanks, please feel free to contact me. Keith
Sure Mr.Keith. You can use it in any of your project.
Do not hesitate to drop me a mail if you want anything to know.
If possible, what I am expecting from you is only a linkback.
පිස්සු හැදිල කොර වුනා. (Really awesome. I double check is it flash?.)
Hi, I really like your work. I would like to use your banner on my site; but i can’t find the source file for the install. Please help!
Thanks
yes CardHouseCrew,
There is no any special source file for installing. If you unzip the downloaded ZIP file, you can find the necessary Javascript file along with the webpage. So you can easily pick and put the code in any page. Check this work for you.
Muneer
Great piece of js.
Everything seems to be working except link option.
I am using Windows Vista and IE8.
Please help.
Thank you
Good Day!
Danie Coetzee! Thanks for using my codes.
Really I was not checking in IE8.
Now only I am checking in IE8 with my Windows 7 OS. I can see all link buttons are working fine in the demo. Please verify your code implementation again. If you want more help, please hit me on my skype ID muneer1st AT skype.com. I will try to help you.
Muneer
Refering to my problem with the link functionality, I changed the bttn_more_small file from a png to a jpg and now it is working.
Maybe it has something to do with jquery.pngFix.js … I notice it does not test for IE7 or IE8.
Please note I am not a programmer at all.
Thanks
Ok Danie, I too guess same. May by any problem with jQuery pngfix vs IE8.
Any way you did it.
You are welcome.
Hello!
Thanks for this, just spent 10$ on something similar in flash and does not work, this works and its for free!
I have a little feature request, can you e-mail me? It’s a bit hard to explain in text and I would like to show you photos, its been done in Javascript before so I don’t know how hard it will be to setup for this.
Also what do you mean by ‘not 100% complete’ looks quite complete to me
Thanks,
Terry
Welcome Terry.
not 100% mean, it has to be enhanced more in future.
thats it.
any way I sent you an email. I hope I can help you. Keep in touch.
Hi Mr.Terry.
I was checking your site, Actually the problem is confliction with the layer’s ordering. It is simple to solve it.
You have to change the z-index style of the root element of the menu. Try to put a maximum value until you are done.
It must work.
Good luck!
You have done an amazing job. But I could not find the installation instruction in the download. Also can we make a plugin out of it for use with WordPress?
i am very sorry Techie that I did not make a detail installation instruction. I have made all the instruction in the code itself in comment style. In the next version what I hope to release, I will make more simple to install and detail documentation. By the way it is possible to make wordpress plugin out of this multi-transition banner. If any one interested on it, I have no objection till he follows my copyright rules.
Thanks.
This is very urgent and your help would be greatly appreciated. I just uploaded this to my website and it works great in FF but in other browsers does not work properly, for example IE. When I drag over the thumbnail, it goes white. It works fine in all browsers until I upload it to my server and it’s up on the web.
Please help!
Thank you.
I figured out that it is slow loading images that is turning the screen white. I tested it on a faster internet connection and it works fine.
Thanks for this it works great and looks amazing.
Hey Muneer! This is excellent!!! Its just what I was looking for and I prefer this to a flash alternative anyday.
I only have one wish …
Is there anyway to make the large image an anchor too so that it goes to same link as specified for thumbnail view?
Thanks for this great script!
Dear Chanman,
Thanks for your comment.
yes, you can have the link. You have to create a hyperlink using
< a href='#' style='display:block; ></a>tag inside the banner div and thumnail div.
By the way, I hope to release the next version of this banner which will be easy to install and configure with many options. Hope to do it soon. Keep looking..
Very nice job, only one thing, in IE7 the links does’t work well. For this issue i change this code =
$(“#thumbDiv_” + i).attr(“onClick”, “window.location.href=’” + link + “‘”)
$(‘#thumbDiv_’ + i).click(function() { window.location.href=link;}); 
for this =
and work like a charm
Thanks for the great work
Great Juve.
Great work! Your solution is beautiful.
I have only one question: how is it possible to link the image itself or the thumbnail images?
Juve,
I tried your code with safari.
It works well except one thing: the link is always the last from the array.
For example always the “http://www.msn.com/” in the original script.
Have you got any idea what would be the solution?
Thank you for advance.
Hi Peter.
Put this code:
"$(this).mouseup(function(){
window.location.href=encBannerTexts[ids][2];
})"
after this:
"if(encEnableFooter)
{
a=0;
$(".imgDiv").each(function()
{
var ids = a;"
and works on ie7, ie8, ff, chrome and opera.
Thanks Juve.
By the way, I am working on a simple to implement banner design.
I will publish it soon.
Hi Muneer,
What an awesome JS this is! It’s a good thing I took the time to google this one and found my way to encodez.com.
You should update your links on the hotscripts website. Your download and blog links there are all broken.
I honestly haven’t tried this one, but I downloaded it already. I need to learn some photoshop so I can put my own images
More power to you buddy!
Thanks for your feedback about broken link. I have updated it now.
can i use this in wordpress?? i tried to add the code the it, but all i get is a black bachground. or can you point me to a similiar wordpress plugin
Hiya Guys,
Good looking programme! Nice work!
Unfortunately, I have not been able to get it to work with a change in width from 900px to 1000px. I have kept the height the same, 325px.
Also, I have entered the code changes above but it still does not work. I have also changed the thumb pngs to jpgs and still doesn’t work. I am left with the possibility that it might be the z-index. However, in changing that, I either get the two middle thumbnails not working or one loads the image to the left and the other thumb no image at all.
Muneer, any chance please that yopu could advise the changes to make this work with a 1000px width and I’ll give an appropriate paypal donation or something please?
Cheers
TelB
Just an addendum to the above,
I forgot to mention that the thumbs do not change with the corrsponding correct larger image in IE8 . this remains the same situation whether the code changes advised above are applied or not.
The application works absolutely fine and beautifully in Mozillla Firefox 3.5.4.
@jones says, It is upto you that how you are going to implement in wordpress. If you embed the source codes on the right place with your template it must work for you.
Hi Muneer!
Chanman asked a question above about making the large banners links, but I didn’t quite understand your answer. Could you help with this?
By the way, awesome script! Thanks!
Sorry Crystal,, there was a code missing there. I updated that reply. have a look at it again.
http://encodez.com/blog/2009/06/javascript-multitransition-banner/#comment-2262
Thanks . I was looking for this . My search end here
Thanks for this, it’s really cool script. I tried it and made little changes to adapt it, every thing works perfectly. But I want to put a hyperlink on large banners and I can’t. I’m not familiar with JS at all. Tried my best, it doesn’t work. I red your comment for Crystal, where do I add this code?
Thanks for your help
Thankx Vi2k,, yes that comment should help you.
http://encodez.com/blog/2009/06/javascript-multitransition-banner/#comment-2262
you can read out the comment of Juve next to my one too. That one is describing how to put the link using JQuery. It should help you.
hello
great work! i am not a programmer and i am helping my friend with a banner sequence
how do i put a link on the second image when i click on it
http://www.esperia.com.au
thanks
Hi Muneer,
What’s easiest way to display the same text ( encBannerTexts[ids][2], I assume ) to display in source, but hidden from view, for SEO for the large banners?
Awesome work! Thanks!
Hi chris,, You can simply include a “title” attribute to the anchor tag.
Really trying to add this banner to our blog, as our main banner, the only problem i am having with it, its that the banner images looks at the the root directory, and i need it to point to another location, using the http://
like this part
var encImageArray = new Array(“img/frontBanner/large/banner1.jpg”
i need it to point to http://www.websitehere.com/img/frontbanner/large/banner1.jpg”
can anyone help how to make this work?
Hi,
really nice work
Would like to use it for a header banner with this so nice fading effect.
I have a png frame to had to all image thaht I want to keep static, is there a way to do it using javascript or should i use CSS positioning to do this ?
Regards
feel free to contact me by mail ideas[at]ideas74[dot]fr if you have any suggestion
your work is GREAT. It is everything I’m looking for EXCEPT for one thing. I would like to be able to link the big images so that if you click them it will take you to a page.
I would also like if the Hand symbol would come up when your over an actively linked image
BUT thats not really that important, if I can make it so that I can link the large image to go to a new page that would be AMAZING. Let me know, I really appreciate your work man, great job.
Hi, I cannot seem to find the install instructions – the link on the demo does nto work, nor do I see the “source file”
also the fixes asked for above..i.e link to the big images would be great!
Hi,
Is it possible to change the height? or is that determined by the image height size?
Thanks
Hey I’m not able to get this to work on my website at all. Anybody who’s had success can you please email me at nick_d9@hotmail.com with some instructions. I’m basically putting this on an HTML website done on servage.net & I can’t get it to work on my site. Check out whats going on right now at http://www.virtualleagues.net/testing/ maybe you’ll know whats wrong off the bat, I can’t figure it out.
Hi TheMainEvent, I went through your source code. Yes, this problem should happen
.
tag. So it is skipping the one that is made for the banner.Actually the reason is, images on the banner are loaded when the onload() even occurs. In your page you have already fired the onload() even from
Your body tag
<body onLoad="show3()">banner’s onload even function
onload=function(){
encLoadBanner();
}
Solution :
Remove the “show3()” function from body onload event and add it in banner’s onload function. Or comment out the banner’s onload function and add the “encLoadBanner();” to the body tag
onload=function(){
encLoadBanner();
show3();
}
thanks for the response muneer. Still having no luck. Tried rebuilding entire site based around the multitransition banner & still no luck, this is what happened when I tried building the site around the banner: http://virtualleagues.net/z/
maybe you have a fix for that? I hope so, really hoping this can work on my site, its exactly what I’m looking for & I’m trying real hard to get it working but so far no luck, hope you can help.
thanks
Now I can see the banner is loading fine. Only you have one problem. The small button set bar is going up. http://img219.imageshack.us/img219/3310/screenshotbanner.jpg
You can control that bar using CSS. Adjust the top:335px of that one. It will bring the link bar down.
You will notice on Style like below
#bannerTD #bannerFooterNav {
position:absolute;
top:335px;margin-top:0;
left:50%;margin-left:-450px;
width:900px;
}
you are the man. Got it working now all thanks to you bud, WOOHOO. So happy. Really appreciate it, please shoot me an email I’d like to keep in touch, maybe you’d be interested in some projects down the road?
Hi
I am sorry if i appear as a complete newbie…i downloaded the zip file extracted them all….copied the whole the code from the index.html and pasted on my index page…..and copied the 2 folders (inc and img) in the same folder as the index file….The javascript is loading as i can see the loading gif…but no images come after that. What could be the problem.. Do i have to resize the images according to the specifications I have specified in the index file??? What am I doing wrong.. I would be grateful if you could help me out here. One thing though..My index page is in php….could that be a problem?? Thank