Canman07
05-26-2012, 03:15 AM
Hey so on my localhost the nivo slider was working perfectly fine. I uploaded everything to my wordpress theme and boom - only the loading.gif is showing... Any solution to this?
Header.php <script src="/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Index.php
<div id="newslider">
<div id="slider_wrapper">
<div id="slider">
<img src="<? bloginfo('stylesheet_directory'); ?>/images/mario.jpg" title="#htmlcaption" />
<img src="<? bloginfo('stylesheet_directory'); ?>/images/starcraft2slider.jpg" title="#htmlcaption" />
<img src="<? bloginfo('stylesheet_directory'); ?>/images/leagueoflegends.jpg" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<a href="#" style="color: white;"><h2>Back2Back wins IPL</h2></a>
<span class="slider-readmore"><a href="#">Read More</a></span>
<p>Everything about the news event will be posted here. It can go on and on intill you are all done then have a read more link at the end to link it to the full page of the story yup yup. Everything about the news event will be posted here. It can go on and on intill you are all done then have a read more link at the end to link it to the full page of the story yup yup.</p>
</div>
</div>
</div>
Any ideas?
Header.php <script src="/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
Index.php
<div id="newslider">
<div id="slider_wrapper">
<div id="slider">
<img src="<? bloginfo('stylesheet_directory'); ?>/images/mario.jpg" title="#htmlcaption" />
<img src="<? bloginfo('stylesheet_directory'); ?>/images/starcraft2slider.jpg" title="#htmlcaption" />
<img src="<? bloginfo('stylesheet_directory'); ?>/images/leagueoflegends.jpg" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<a href="#" style="color: white;"><h2>Back2Back wins IPL</h2></a>
<span class="slider-readmore"><a href="#">Read More</a></span>
<p>Everything about the news event will be posted here. It can go on and on intill you are all done then have a read more link at the end to link it to the full page of the story yup yup. Everything about the news event will be posted here. It can go on and on intill you are all done then have a read more link at the end to link it to the full page of the story yup yup.</p>
</div>
</div>
</div>
Any ideas?