thunderclap82
10-17-2010, 12:19 AM
I'm trying to incorporate a jQuery image rotator into the header of my forum so the logo rotates after a set amount of time. I think I'm on the right track but am bumping into a wall.
I created a new template called banner_rotatorwith the jQuery 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">
<img width="500px" src="images/titleimage/BLUESKIES.jpg" alt="" />
<img width="500px" src="images/titleimage/CBB_WD12.jpg" alt="" />
<img width="500px" src="images/titleimage/DK_RMBJ.jpg" alt="" />
<img width="500px" src="images/titleimage/Q2_T4.jpg" alt="" />
</div>
<vb:literal>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
});
});
</script>
</vb:literal>
I then go to the header template and change the line:
<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>
with:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:raw banner_rotator}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
Needless to say this doesn't work. Is what I'm trying to do feasible and I'm coding something wrong, or is this not doable?
I created a new template called banner_rotatorwith the jQuery 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">
<img width="500px" src="images/titleimage/BLUESKIES.jpg" alt="" />
<img width="500px" src="images/titleimage/CBB_WD12.jpg" alt="" />
<img width="500px" src="images/titleimage/DK_RMBJ.jpg" alt="" />
<img width="500px" src="images/titleimage/Q2_T4.jpg" alt="" />
</div>
<vb:literal>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
});
});
</script>
</vb:literal>
I then go to the header template and change the line:
<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>
with:
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:raw banner_rotator}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
Needless to say this doesn't work. Is what I'm trying to do feasible and I'm coding something wrong, or is this not doable?