Coding-Spot

You are not connected. Please login or register

 
 
 

Nivo Slider in your forum

Message (Page 1 of 1)

avatar
 
Administrator
Administrator

Posted on April 12th 2013, 12:07 am

 
Here's a quick tutorial, adding a Nivo Slider to your forum. (This are already prepared-codes, all you need to do is to place and edit the pictures)

Forum Version: All versions!
Demo: Click Me!

1. 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://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider1.jpg" title="This displays the caption 1" alt=""/>
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider4.jpg" alt="" />
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg" title="This displays the caption 2" />
<img src="http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider3.jpg" />

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

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

2. Now all you need to do is to change the image. Just replace the picture image inside the image 'src' and it should work. If you want to change the caption, just change the text inside the 'title'. Or if you want to add caption on other image, just add this on the image tag.
Code:
title="This displays the caption"

Enjoy! :):



Last edited by Mark on May 31st 2013, 4:37 pm; edited 4 times in total



View user profile http://coding-spot.darkbb.com


avatar
 
New Member

Posted on April 16th 2013, 2:58 pm

 
Awesome!

Thanks for sharing!



View user profile http://houkago-tea-time.forumakers.com/


avatar
 
Administrator
Administrator

Posted on April 17th 2013, 1:12 am

 
Thanks, and, welcome! :P:



View user profile http://coding-spot.darkbb.com


avatar
 
Advance Member

Posted on April 22nd 2013, 3:44 am

 
How can I add links on the images?



View user profile http://www.bdtipsntricks.com/


avatar
 
Administrator
Administrator

Posted on April 22nd 2013, 6:28 am

 
Add an a tag on the img tag. It should be something like this:
Code:
<a href="linkhere"><img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>

:):



View user profile http://coding-spot.darkbb.com


avatar
 
Advance Member

Posted on April 22nd 2013, 3:00 pm

 
Mark wrote:Add an a tag on the img tag. It should be something like this:
Code:
<a href="linkhere"><img src="http://i48.tinypic.com/35lw9yv.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>

:):

Thanks a lot.



View user profile http://www.bdtipsntricks.com/


avatar
 
Advance Member

Posted on April 22nd 2013, 6:13 pm

 
I have a problem after adding this. It's working but showing big blank space. Can I re-size it? Here is a screenshot



View user profile http://www.bdtipsntricks.com/


avatar
 
Administrator
Administrator

Posted on April 26th 2013, 6:36 pm

 
Hello!

Sorry for late reply, do you still encounter this problem? :):



View user profile http://coding-spot.darkbb.com


#9

Sponsored content


 

Posted

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None