...

View Full Version : Help implementing Nivo Slideshow



sykesy69
12-28-2010, 11:26 AM
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 :o(

Here's my markup:

<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:

#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:

/*
* 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...

sykesy69
12-29-2010, 11:34 AM
Boost Up My Post...

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

Sciliano
12-29-2010, 03:15 PM
See,
http://www.javascript-demos.com/FreeSample.html

sykesy69
12-29-2010, 11:26 PM
$9.95 and it doesn't even look as good as Nivo slider :o(

sykesy69
12-30-2010, 12:52 AM
No worries, it's sorted now...

seco
12-30-2010, 12:53 AM
did you put this in your page?



<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>

sykesy69
12-30-2010, 01:10 AM
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...

sykesy69
12-30-2010, 11:49 AM
did you put this in your page?



<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???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum