Codeinwp / Nivo-Slider-jQuery

Nivo Slider - The Most Awesome jQuery Image Slider
http://docs.themeisle.com/article/485-getting-started-with-the-nivo-slider-jquery-plugin
MIT License
1.25k stars 605 forks source link

Transition Off; Bullets Missing #307

Open dijares opened 12 years ago

dijares commented 12 years ago

Hello! I'm creating a site for a group within our intranet. So, therefore I'm unable to give you a link to show you the site. I'm using the nivo-slider to transition 3 images with captions and no links. I'm using the default theme.

It worked fine when testing on my desktop. I've now sent the files to our person to put on the server (IIS) and the following things have occurred:

Since the site is on an intranet server and does not have access to the internet, I made sure the google jquery file was in it's own file.

I should add that this is happening only with IE9. It works fine with FF and Safari, but as this is an intranet, and a government organization, 99.9% of the people will view this using IE. Thanks for your help!

Here is my HTML: Within Head: `

<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
<script src="slider/jquery171.min.js" type="text/javascript"></script>
<script src="slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
` Within body: `
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/slider01.jpg" alt="Arizona Wetland, Hoover Dam, Antietam National Battlefield, and LCR Diversity Days Poster" title="Arizona Wetland, Hoover Dam, Antietam National Battlefield, and LCR Diversity Days Poster" data-transition="fade" />
<img src="images/slider02.jpg" alt="Quartermaster Depot, Roosevelt Dam, Desert Tortoise, and Great Basin Wetland Book Cover" title="Quartermaster Depot, Roosevelt Dam, Desert Tortoise, and Great Basin Wetland Book Cover" data-transition="fade" />
<img src="images/slider03.jpg" alt="Western Bat Logo, DOI SAIGE Diversity Poster, Native American Poster, and Flat Tail Horn Lizard" title="Western Bat Logo, DOI SAIGE Diversity Poster, Native American Poster, and Flat Tail Horn Lizard" data-transition="fade" />
</div>
</div><!--END image slider-->
<!--START script for image slider-->
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});

`

Default.css:

    /\* CSS Document _/
    /_
    Skin Name: Nivo Slider Default Theme
    Skin URI: http://nivo.dev7studios.com
    Description: The default skin for the Nivo Slider.
    Version: 1.3
    Author: Gilbert Pellegrom
    Author URI: http://dev7studios.com
    Supports Thumbs: true
    */

.theme-default .nivoSlider { position:relative; background:#fff url(loading.gif) no-repeat 50% 50%; margin-top:0px; margin-bottom:0px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a;



}
.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    text-align: center;
    padding: 0px 0;
}
.theme-default .nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0px 2px 0px 2px;
    /_margin: 0 2px -10px 2px;_/
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
    font-size:12px;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    background: none;
    margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}```
###### 

Nivo-slider.css
```@charset "utf-8";
/\* CSS Document _/
/_
- jQuery Nivo Slider v3.1
- http://nivo.dev7studios.com
  *
- Copyright 2012, Dev7studios
- Free to use and abuse under the MIT license.
- http://www.opensource.org/licenses/mit-license.php
  */

/\* The Nivo Slider styles _/
.nivoSlider {
    position:relative;
    width:800px;
    /_width:100%;*/
    height:auto;
    overflow: hidden;
    margin: 0;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

/\* If an image is wrapped in a link _/
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/_ The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

/\* Caption styles _/
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.7;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.7;
    filter:alpha(opacity=7);
    -webkit-box-sizing: border-box; /_ Safari/Chrome, other WebKit _/
    -moz-box-sizing: border-box;    /_ Firefox, other Gecko _/
    box-sizing: border-box;         /_ Opera/IE 8+ _/
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/_ Direction nav styles (e.g. Next & Prev) _/
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/_ Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}```
dijares commented 12 years ago

Okay, so after having no response here, nor when emailing the developer, I finally found an updated thread here: http://support.dev7studios.com/discussions/nivo-slider/2021-nivo-31-not-working-in-ie

Seems there's some issues with IE 8/9. And an older version of the JS seems to work. Hopefully this will get fixed soon!