It should be a lot easier than what you think.
First, open your
forumhome and place this code after
<body> tage and change whatever necessary such as domain name and image url :
PHP Code:
<center>
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
<a href="http://www.domain.com"><img src="http://www.image.com" title="Put a caption here."/></a>
</div>
</div>
<script type="text/javascript" src="http://www.yourvBulletinsiteurl.com/slideshow/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.yourvBulletinsiteurl.com/slideshow/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:250, // Slide transition speed
pauseTime:8000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:false, // Next & Prev navigation
directionNavHide:false, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
controlNavThumbsFromRel:false, // Use image rel for thumbs
captionOpacity:1, // Universal caption opacity
keyboardNav:true, // Use left & right arrows
pauseOnHover:true, // Stop animation while hovering
});
});
</script>
</center>
2nd Step:
add this to your
headinclude template:
PHP Code:
<link rel="stylesheet" href="http://www.yourvBulletinsiteurl.com/slideshow/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.yourvBulletinsiteurl.com/slideshow/css/style.css" type="text/css" media="screen" />
Save your work and you are done. There is no need to install the plugin.
Remember to upload the necessary images and folders so it works correct...
And Last Step:
Copy your css files codes in your additional.css so style works...
And your are done!!
ANy questions, shoot this thread up again
Good luck