View Full Version : Nivo Slider on forum homepage
Collectors
06-24-2013, 09:12 AM
I would like to use the Nivo Slider on my forum homepage. I've read this (http://www.vbulletin.com/vbcms/content.php/627-CMS-Slideshow-Widget) installation tutorial but it's for the CMS.
What do I have to change from the tutorial so that it works on my forum home?
bbgun1
09-12-2013, 05:59 PM
Have you had any luck figuring this out? I would like to do this as well.
fxdigi-cash
09-13-2013, 07:32 AM
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 :
<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:
<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 :)
CAG CheechDogg
09-13-2013, 10:11 AM
@ fxdigi-cash - Hey man thanks for posting how to add this slider, works great !
fxdigi-cash
09-14-2013, 12:07 AM
glad it was helpful :)
CAG CheechDogg
09-14-2013, 12:14 AM
glad it was helpful :)
I have been trying to get the thumbs to work but no luck though, would you happen to know what to do there?
fxdigi-cash
09-14-2013, 01:52 AM
I have been trying to get the thumbs to work but no luck though, would you happen to know what to do there?
which thumb?? is it a mod?? if so, what version and what exactly want the help with? can you show me a snapshot or image...!!
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.