The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Nivo Slider Caption

View previous topic View next topic Go down

Solved Nivo Slider Caption

Post by roanxxx on April 18th 2013, 3:11 pm

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
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 on April 18th 2013, 5:03 pm

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
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

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

Back to top Go down

Solved Re: Nivo Slider Caption

Post by toppas on April 18th 2013, 5:50 pm

work :wouhou:

toppas
New Member

Posts : 4
Reputation : 1
Language : bahasa indonesia

Back to top Go down

Solved Re: Nivo Slider Caption

Post by roanxxx on April 19th 2013, 2:04 pm

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

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 on April 19th 2013, 2:47 pm

Topic Solved & Locked

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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