Nivo Slideshow

[Megalith]

I'm having a heck of a time trying to figure out how to optimize the Nivo Slider on a site I'm developing.

http://nivo.dev7studios.com/#usage

I'm able to get the slideshow running, but have no idea what "fat to trim." Basically, my version aims to be much simpler than the version running at the developer's homepage. I just want a slideshow of 700x400 px images on a div with practically no markup except for width, height, and margins.

Two problems I'm having is that the lower buttons don't show up at all (probably because I need to upload button graphics on my end first), and another weird issue where the current image will lose its position and move down, showing a second image underneath (this likely has to do with extraneous css attributed to the html caption id or class).

So, is there anyone who can help me with the core functionality of this? I also fiddled around with the css values that control the caption styling a bit, but since this slideshow is going to be for editorial purposes, I need to have a headline and some regular text on the following line. Can't figure that out either, since there's only one caption text element and, therefore, one way to style it.

 

[Jonowxeno]

What 'fat to trim' are you speaking of specifically? The Javascript, HTML or CSS portion? Not sure how you would trim the HTML part, it's basically a div with the image tags.

Yes the buttons are images, so see if they show up after you upload the graphics. I don't quite understand what happens when you say 'lost its position and move down' Is your page on a live site I can look at to see what happens + your code.

Since the caption part is enclosed in a div, you can add a title like so

<div id="htmlcaption" class="nivo-html-caption">
<h1>Sample Title</h1>
<p>Regular Text Here</p>
</div>

then style the nivo-html-caption h1 & p tags however you wish

 

[Megalith]

I'm trying to trim the CSS, since I figure most of it has to do with the developer's more fancy design.

I like your idea about the header tag with the htmlcaption div, but I've removed that completely because I have no use for hyperlinked captions. That leaves me with this:

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

Title, of course, determines the caption text---but how would I get a header tag into that? Here's all the CSS associated with the slider:

site.css

/* BEGIN Nivo Slider Stuff */

.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 {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
	font-size:12px;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

/* END Nivo Slider Stuff */

nivo-slider.css

/* 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:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	height:100px;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index: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 a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

Another thing that's confusing is the "slider" id. I removed that entirely in my css and everything still seems to function normally, yet when I remove that in the html (leaving only the class), the caption overlay disappears entirely. It seems there should be no effect whatsoever because that id doesn't even exist in the two css files.

 

[Jonowxeno]

I think to trim the css down, you'll just have to go through it and see what you want to see and what you don't want, but I think the css in the nivo-slider.css is already trimmed down and has the required css for it to be the same layout.

As for your captions, you'll need to use javascript to grab the title attribute. If this is your header, you'll then need to append it with h1 tags (or whatever tag) into the html. I think the nivo slider way of doing captions is easier if you don't want to write more code.

as for the 'slider' id. Yes it actually doesn't do anything with the css however if you look at the demo

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

you'll see this. The jQuery is targeting the slider id to turn it into the slideshow. You can replace the id with whatever you want