Forum Display Enhancements - Logo Rotation

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:

$templater = vB_Template::create('banner_rotator');
$templatevalues['banner_rotator'] = $templater->render();
vB_Template::preRegister('header', $templatevalues);

4. Save the Plugin.
5. Go to vB AdminCP --> Styles & Templates --> Style Manager --> Add New Template. Enter the following information:

Title: banner_rotator
Template:

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

(Note: There are a lot of customizations for Nivo here, so I suggest you looking over the official website to get an idea of what you can do. These settings change the logo every seven seconds or so. Also, with each new logo you can click on it and be taken to a different URL.)

6. Save.
7. Edit the additional.css template. Add at the bottom:

/* 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;
}

8. Save.
9. Edit the header template. Find:

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

Delete or comment it out, then replace add:

<div style="width:XXXpx; height:XXXpx;">
{vb:raw banner_rotator}
</div>

(Replace the "XXX" in width and height to that suite your graphic. Width might need a little extra room so experiment a bit.)

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

[Internetcafe]

Anyone found something similar that will work on a fluid design !?

[jimfries]

Originally Posted by Internetcafe

Anyone found something similar that will work on a fluid design !?

I've searched quite a bit, but have not found anything.

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.

[zapiy]

Anyway this could be used elsewhere in a theme?

[thunderclap82]

Originally Posted by zapiy

Anyway this could be used elsewhere in a theme?

I don't see why not, though you'd have to modify the code a bit.

[Liff]

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 )

[thunderclap82]

Originally Posted by Liff

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?

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.

[Liff]

Originally Posted by thunderclap82

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.

Hey tc, thanks very much for your help.

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?

[thunderclap82]

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?

[Liff]

Originally Posted by thunderclap82

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?

The page loads OK, just without the banner..

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

[thunderclap82]

Is the image a PNG? Nivo doesn't play nice with PNG so be sure to use JPG.