We help IT Professionals succeed at work.

Customise Nivo Slider

780 Views
Last Modified: 2013-11-19
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
Comment
Watch Question

Lead Developer
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Greg AlexanderLead Developer

Commented:
So...... did that help ya?

Author

Commented:
Thank you very much for all your help.

Author

Commented:
Hi galexander07

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

That's perfect, thank you very much.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.