SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot get Nivo Slider to work properly in Firefox

    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.

  2. #2
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!!

  3. #3
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •