The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Nivo Slider Caption

4 posters

Go down

Solved Nivo Slider Caption

Post by roanxxx Thu 18 Apr - 16:11

Hello. How can I add the nivo slider in the homepage only?
And how can I put Captions in every slide?

Thanks!

My Forum
roanxxx
roanxxx
Forumember

Posts : 41
Reputation : 1
Language : English

http://aibtcii.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Caption

Post by E-Mark Thu 18 Apr - 18:03

Put this in your Homepage Message (ACP > Display > Homepage > Generalities)

Code:
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/8cbmksz3o/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/NnQmksygd/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://static.tumblr.com/hhedat8/J4Bmksyye/default.css" type="text/css" media="screen" />

<center> <div id="wrapper"><div class="slider-wrapper theme-default"><div id="slider" class="nivoSlider">

<img src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption1" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://i48.tinypic.com/35lw9yv.jpg" title="#caption2" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

<div id="caption1" class="nivo-html-caption">
This will display the caption #1, just edit this part.
</div>

<div id="caption2" class="nivo-html-caption">
This will display the caption #2, just edit this part.
</div>

</div>
</div>
</div>
</center>

<script type="text/javascript" src="http://static.tumblr.com/hhedat8/gYrmksxtn/jquery-1.9.0.min.js"></script>
<script src="http://static.tumblr.com/hhedat8/NqOmksx73/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider();
    });
</script>

Now all you need to do is to edit the image.
Change this one with your image url.
Code:
http://i48.tinypic.com/35lw9yv.jpg
E-Mark
E-Mark
Active Poster

Male Posts : 1411
Reputation : 169
Language : English
Location : Bitcoin

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: Nivo Slider Caption

Post by toppas Thu 18 Apr - 18:50

work :wouhou:
avatar
toppas
New Member

Posts : 4
Reputation : 1
Language : bahasa indonesia

Back to top Go down

Solved Re: Nivo Slider Caption

Post by roanxxx Fri 19 Apr - 15:04

Gee thanks Emark! XD Really helped me a lot Smile Just lock it now.
roanxxx
roanxxx
Forumember

Posts : 41
Reputation : 1
Language : English

http://aibtcii.forumtl.com/

Back to top Go down

Solved Re: Nivo Slider Caption

Post by Sanket Fri 19 Apr - 15:47

Topic Solved & Locked
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum