Link to home
Start Free TrialLog in
Avatar of LLC0706
LLC0706

asked on

Customise Nivo Slider

I'm trying to customise the caption, so that it has a different style for each image in the slider.
Basically what I want to do is change the dimensions and position of the caption for each image in the slider.

For example:
.nivo-caption-01 {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	height: 46px;
	z-index:8;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 34px;
	padding-top: 24px;

.nivo-caption-02 {
	position:absolute;
	left:0px;
	top:0px;
	background:#FF0000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:400;
	height: 200px;
	z-index:8;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 34px;
	padding-top: 24px;

Open in new window

          <div id="slider" class="nivoSlider">
            <img src="images/slider/image_01.jpg" alt="" title="Lorem ipsum deserunt" />
            <img src="images/slider/image_02.jpg" alt="" title="Lorem ipsum deserunt" />
            <img src="images/slider/image_03.jpg" alt="" title="Graeci adolescens" />
            <img src="images/slider/image_04.jpg" alt="" title="Cum movet exerci nominavi" />
            <img src="images/slider/image_05.jpg" alt="" title="Graeci adolescens" />
            <img src="images/slider/image_06.jpg" alt="" title="Cum movet exerci nominavi" />
          </div>

Open in new window



I understand that if I give each image a unique id I should be able to achieve this, however I'm not quite sure how to adjust the code in the jquery.nivo.slider.pack.js file.

The slider and code can be found here: http://nivo.dev7studios.com/

Can anyone help me with this?

Many thanks in advance.
jquery.nivo.slider.pack.js
ASKER CERTIFIED SOLUTION
Avatar of Greg Alexander
Greg Alexander
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
So...... did that help ya?
Avatar of LLC0706
LLC0706

ASKER

Thank you very much for all your help.
Avatar of LLC0706

ASKER

Hi galexander07

Sorry for the late response; I've been away.

That's perfect, thank you very much.