Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help implementing Nivo Slideshow

    Hi All,

    Hoping somebody can help me with my implementation of the Nivo Slideshow on my website... I've been at it for a couple of days now and I'm just about ready to give up (

    Here's my markup:
    Code:
     <div id="slider">
               <img src="/images/Slide1.png" alt="" title="Dead Kool"/>
               <a href="http://dev7studios.com"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a>
               <img src="/images/Slide3.png" alt="" title="Asteroids" />
               </div>
    My CSS:
    Code:
    #slider {
        position:relative;
        width:620px;
        height:350px;
        background-image:url(../images/title.gif);
        background-position:-10px 30px;
        background-repeat:no-repeat;
        background-attachment:fixed;
    }
    #slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:none;
    }
    #slider a {
        border:0;
        display:block;
    }
    .nivo-controlNav {
        position:absolute;
        left:260px;
        bottom:-42px;
    }
    .nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(images/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
    }
    .nivo-controlNav a.active {
        background-position:0 -22px;
    }
    
    .nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(images/arrows.png) no-repeat;
        text-indent:-9999px;
        border:0;
    }
    a.nivo-nextNav {
        background-position:-30px 0;
        right:15px;
    }
    a.nivo-prevNav {
        left:15px;
    }
    
    .nivo-caption {
        font-family:"Lucida Sans Unicode", "Lucida Grande";
    }
    .nivo-caption a { 
        color:#f71cac;
        text-decoration:underline;
    }
    Slider CSS:
    Code:
    /*
     * jQuery Nivo Slider v2.3
     * http://nivo.dev7studios.com
     *
     * Copyright 2010, Gilbert Pellegrom
     * Free to use and abuse under the MIT license.
     * http://www.opensource.org/licenses/mit-license.php
     * 
     * March 2010
     */
     
     
    /* The Nivo Slider styles */
    .nivoSlider {
        position:relative;
    }
    .nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
    }
    /* 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:60;
        display:none;
    }
    /* The slices in the Slider */
    .nivo-slice {
        display:block;
        position:absolute;
        z-index:50;
        height:100%;
    }
    /* Caption styles */
    .nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        opacity:0.8; /* Overridden by captionOpacity setting */
        width:100%;
        z-index:89;
    }
    .nivo-caption p {
        padding:5px;
        margin:0;
    }
    .nivo-caption a {
        display:inline;
    }
    .nivo-html-caption {
        display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:99;
        cursor:pointer;
    }
    .nivo-prevNav {
        left:0px;
    }
    .nivo-nextNav {
        right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav a {
        position:relative;
        z-index:99;
        cursor:pointer;
    }
    .nivo-controlNav a.active {
        font-weight:bold;
    }
    The test site is here http://www.koolkiddclothing.com/Test

    I feel like I'm being dumb, but for some reason I just can't get it to work, so any help is good help...

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Boost Up My Post...

    Does anybody have an alternative to Nivo if you can't help with this???

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    $9.95 and it doesn't even look as good as Nivo slider (

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    No worries, it's sorted now...

  • #6
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    did you put this in your page?

    Code:
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'random', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500, //Slide transition speed
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
            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
            beforeChange: function(){},
            afterChange: function(){},
            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>

  • Users who have thanked seco for this post:

    sykesy69 (12-30-2010)

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I hadn't... I had tried so many combos it was in at one stage...

    But ultimately I think I was missing the class="nivoSlider" in my div...

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by seco View Post
    did you put this in your page?

    Code:
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'random', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500, //Slide transition speed
            pauseTime:3000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
            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
            beforeChange: function(){},
            afterChange: function(){},
            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>
    Weird...

    When I add the above, I get no slideshow.

    When I add just the first 2 coded lines it works, but obviously I have no control...

    Any ideas???


  •  

    Posting Permissions

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