Coding-Spot

You are not connected. Please login or register

 
 

Nivo Slider in your forum

Message (Page 1 of 1)


 
Administrator
Administrator

Posted on Thu Apr 11, 2013 5:07 pm

 
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 Fri May 31, 2013 9:37 am; edited 4 times in total



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



 
New Member

Posted on Tue Apr 16, 2013 7:58 am

 
Awesome!

Thanks for sharing!



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



 
Administrator
Administrator

Posted on Tue Apr 16, 2013 6:12 pm

 
Thanks, and, welcome! :P:



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



 
Advance Member

Posted on Sun Apr 21, 2013 8:44 pm

 
How can I add links on the images?



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



 
Administrator
Administrator

Posted on Sun Apr 21, 2013 11:28 pm

 
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



 
Advance Member

Posted on Mon Apr 22, 2013 8:00 am

 
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/



 
Advance Member

Posted on Mon Apr 22, 2013 11:13 am

 
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/



 
Administrator
Administrator

Posted on Fri Apr 26, 2013 11:36 am

 
Hello!

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



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


#9

Sponsored content


 

Posted Today at 2:26 pm

 





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