The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Logo Rotation Details »» | |||||||||||||||||||||||||
I had a client who wanted a rotating logo system that allowed them to have fancy transitions and have each logo link to a specific page. No mod I could find allowed this so, utilizing a jQuery app called Nivo Slider, I've managed to create exactly what they wanted.
Please note that I've only attempted this with a fixed theme. I do not know how it will behave with a fluid one. If someone wants to test it and let me know I'll make changes to the instructions as necessary. DEMO Special Thanks: Lynne for helping me get the plug-in portion working properly. Requirement: Nivo Slider 1. Download and decompress the Nivo Slider archive. 2. Upload the files jquery.nivo.slider.pack.js and nivo-slider.css to your forums 'clientscript' folder. 3. Go to vB AdminCP --> Plugins & Products --> Plugin Manager --> Add New Plugin. Enter the following information: Product: vBulletin Hook Location: template_register_var Title: Nivo Logo Rotator Execution Order: 5 Plugin PHP Code: Code:
$templater = vB_Template::create('banner_rotator'); $templatevalues['banner_rotator'] = $templater->render(); vB_Template::preRegister('header', $templatevalues); 5. Go to vB AdminCP --> Styles & Templates --> Style Manager --> Add New Template. Enter the following information: Title: banner_rotator Template: Code:
<link rel="stylesheet" href="clientscript/nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="clientscript/jquery.nivo.slider.pack.js" type="text/javascript"></script> <div id="slider"> <a href="your URL"><img src="link to your image file" /></a> </div> <vb:literal> <script type="text/javascript"> $(window).load(function() { var total = $('#slider img').length; var rand = Math.floor(Math.random()*total); $('#slider').nivoSlider({ effect:'random', slices:15, animSpeed:500, pauseTime:7000, startSlide:rand, directionNav:false, directionNavHide:true, controlNav:false, controlNavThumbs:false, controlNavThumbsFromRel:false, keyboardNav:true, pauseOnHover:true, manualAdvance:false, captionOpacity:0.8, beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){} }); }); </script> </vb:literal> 6. Save. 7. Edit the additional.css template. Add at the bottom: Code:
/* CSS for Banner_Rotator */ .banner_rotator #slider { position:relative; background:url(images/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a{ display:block; } 9. Edit the header template. Find: Code:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div> Code:
<div style="width:XXXpx; height:XXXpx;"> {vb:raw banner_rotator} </div> 10. Save. You should now have a rotating logo in the header of your vB forum. Version History 0.7: Added code at step 9 to help lock the header dimensions for your logo. 0.6: Fixed IE bug 0.5: Initial Release Show Your Support
|
Comments |
#2
|
|||
|
|||
Reserved.
|
#3
|
|||
|
|||
Very, very cool!
Is it just random? For example, if I have a logo I want to show up first can I do that? |
#4
|
|||
|
|||
I have mine configured as random, but you can have it go in a specific order if you like.
|
#5
|
|||
|
|||
perfect.
|
#6
|
|||
|
|||
Couldn't this be made in to a widget to use on the homepage for news? I'd love something like this to work with the VB CMS system as a widget
|
#7
|
|||
|
|||
I had it working in a CMS article so I don't know why you couldn't get it working in a widget. I can't say for sure, but I'd guess instead of putting the code in the banner_rotator template you could put it in a static_html widget. You probably wouldn't need to make the plug-in then either.
|
#8
|
||||
|
||||
This is really cool man. I tried it on a fluid style, and you will have to use it a bit differently though.
There is a problem however. If you look at my screenshot, you will see that the banner seems to be broken into parts and thrown to the bottom of the actual banner. The js affects also seems to only happen on these broken parts, and not on the banner on top at all. Attachment 123029 I am on 4.0.8, I hope you can help me to fix this. Thanks. |
#9
|
|||
|
|||
I tried upgrading to 4.0.8 but it completely destroyed my custom theme, so I reverted to 4.0.7. Until the designer of my theme releases an update (which they said won't happen until 4.1) I'm not going to be much help. If you want to give me limited access to your site I'd be happy to look at the templates and see if I can spot were the trouble is. PM me if interested.
|
#10
|
|||
|
|||
vb 4.08 problem
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|