The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
![]() |
|||||||||||||||||||||||||
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 |
#42
|
|||
|
|||
![]()
Anyone found something similar that will work on a fluid design !?
|
#43
|
||||
|
||||
![]() Quote:
I can't even use this code, as it hides my log-in information, and my users are unable to log in to my forums. |
#44
|
|||
|
|||
![]()
Anyway this could be used elsewhere in a theme?
|
#45
|
|||
|
|||
![]()
I don't see why not, though you'd have to modify the code a bit.
|
#46
|
|||
|
|||
![]()
I really like the idea of this mod however when I complete stage three and activate the new plug-in it causes a 503 error when I refresh the forum.
My forum is running on 4.2.0 - Has anyone got any ideas on how they have updated this to suit? All I need is a simple banner rotator that can use external tinypic links as the img src so this is perfect. Please help ![]() |
#47
|
|||
|
|||
![]()
I'm still running this mod and have 4.2 PL1. I think your problem is the hook location. At one point I had to change it due to a conflict. Try changing it to parse_templates and see what happens.
|
#48
|
|||
|
|||
![]() Quote:
Now it doesn't give me the error message however it simply doesn't show any banner. I'm good at following instructions but not so good at being creative with coding - Is there anything else I should be doing differently? |
#49
|
|||
|
|||
![]()
Is it breaking the design completely as in the page won't load at all, or is it just he banner itself? Do you have a link so I can see?
|
#50
|
|||
|
|||
![]() Quote:
It's a lovely looking Mod, so I realy appreciate you bringing it to us as well as trying to work thought my issues :thumbup: http://twistsnturns.net/forumdisplay.php?2-67 And select the Style: Child of TNT67 |
#51
|
|||
|
|||
![]()
Is the image a PNG? Nivo doesn't play nice with PNG so be sure to use JPG.
|
![]() |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|