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.
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.