I’ve installed a test slideshow using the Nivo Slider on my company’s website. I can see the slideshow perfectly using IE 8, Safari 5.0, Opera 10.6 and Chrome 5.0. I’m using Firefox version 3.6.6.
There are 5 test slides in my slideshow. They are all the same size, named slide1.jpg through slide5 jpg.
In Firefox, for most of today, all I could see were slides 1 and 5–it would just transition back and forth between those two slides as if the other 3 didn’t exist. I tried to make minor adjustments to the code to fix this, but finally gave up and started from scratch. Now I can only see the slide 1. It does not give me the option to navigate to other slides at all.
The other thing is that I can preview the page in Firefox out of Dreamweaver CS3 and it loads fine in the preview page. But once it’s uploaded, Firefox fails to load it properly.
I’m at a loss of what to try. I’d welcome any ideas. You can view my test slider at http://www.dentinstruments.com/nivotest.html
Thank you for your help.
My pictures are already named without spaces…they are “slide1.jpg”, “slide2.jpg” and so on up to “slide5.jpg.”
Are there any other things I can try? Does Firefox require some kind of special code in the CSS file to make it load properly? I’m afraid this is not my area of expertise–I could stare at this all day and not see the solution. I appreciate your help!
yeah. I got this problem but in my case it wasn’t showing none of my pictures using firefox or chrome but worked at IE8.
What I did?
I’ve just removed the spaces a the the pictures’ filenames.
before “ïmage 032.jpg”
corrected “image032.jpg”
and it worked!!
try it!!!
OK. Did you follow the steps from the nivo website?
there’s a script(javascript) needed on the <head> section of your html and you have to reference the nivoCSS file as well.
here’s the head section:
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<link rel=“stylesheet” href=“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=“jquery.nivo.slider.pack.js” type=“text/javascript”></script>
<script type=“text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
controlNav:false,
pauseTime:4500,
directionNav:false});
});
$(document).ready(function() {
$(‘#download-form input:radio’).change(function(){
var url = $(‘#download-form input:radio:checked’).val();
$(‘#download-btn’).attr(‘href’, url);
});
$('a#download-jump').click(function(){
$(window).scrollTo($('a[name="download"]'), 1000);
});
});
</script>
</head>
BOTH nivo-slider.css and jquery.nivo.slider.pack.js files must be on the same folder of your HTML file (index.html for instance). OR you’ll have to point the location manually on the head section like: folder/nivo-slider.css …
on the <body> section do the following…
<div id=“slider”>
<img src=“images/happyPeople/mulherGrama.jpg” />
<img src=“images/happyPeople/mulherBracosAbertos2.jpg” />
<img src=“images/happyPeople/meninoEstrela.jpg” />
<img src=“images/happyPeople/mulherBracosAbertos.jpg” />
<!-- div slider –>
</div>
the id of the <div> must be “slider” so it can use its definitions made on the css file. if you want to move freely… put this DIV inside another one that you can manipulate the position (code or design view).
This will make it work.