nivo slider – add text to the slider
Question by oliverbj
I am currently using the nivo slider on my homepage, to show different images. It works perfectly. Although, next to the images there are some text, which I would like to follow each picture.
Here is the HTML code:
<!-- Splash -->
<div class="splash">
<div class="splash-content">
<div id="text1">
<h1>More traffic to your website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitectetur adipis. In ultrices malesuada est eu laoreet. Nullam eget tellus ac lacus bibendum egestas et at libero. Vestibulum commodo magna ut suscipit.</p>
</div>
</div>
<div id="slider" class="nivoSlider nivo-right theme-default">
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
<img src="images/splash.png" alt="" title="" />
</div>
</div><!-- End Splash -->
As you can see in the HTML code, there is the <div id="slider">, which is the nivo slider. Although, I wish to have the <div id="text1"> to follow each picture. Then have a <div id="#text2"> to follow the next image and so on.
The jQuery code to control the nivo slider:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceUp', // Specify sets like: 'fold,fade,sliceDown'
});
});
</script>
Thanks in advance.
Answer by Starx
Use title attribute in the <img /> to define text to appear as caption in the slider.
Lets see an example:
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<!-- ^ This is one way to bring caption -->
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<!-- ^ This is ANOTHER way -->
</div>
<!-- This part of caption is called from the second image link above see `#htmlcaption` there -->
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
Update
Without hacking the code, you can override the default class to appear as a separate text box.
Find .nivo-caption style and make some changes to it
.nivo-caption {
width: 200px;
height: 250px;
left: -200px; /* same as the width */
}
Update 2
Here is a demo with your slider working with the workaround i mentioned.
SO far as this question goes, this is where i stop. Hope it helps.
