How to use Nivo Slider with Views for Joomla

I have added Nivo Slider to my Joomla extension Views for Joomla as a sample layout. Hope this gives you an idea about how you can chuck in jQuery Gallery plugin into your Joomla site.

To use Nivo Slider layout you need to do the followings:

1. Create a category. Say it is called "Slider".
2. Create articles for the category "Slider". Each article contains the following tags:
   • IMG - The slider image. This is mandatory.
   • H2 - The text including HTML tags in H2 tag will be used for Caption (Read about Caption).

   Sample HTML

   
   This is an example of a HTML caption with a link.
   
   
   
   
   
   

3. Create Views for Joomla module at Module Manager.

4. Select "nivo-slider" at "Alternative Layout".

   

5. Set the module settings as follows:

   

   CSS (This is sample. Actual style depends on the template you use.)

   .slider-wrapper { 
       width: 80%;
       margin: 20px auto;
   }
   .theme-default #slider {
       margin:100px auto 0 auto;
   }
   .theme-pascal.slider-wrapper,
   .theme-orman.slider-wrapper {
       margin-top:150px;
   }
   

   

   Javascript (This is sample. Actual logic depends on your Joomla site. This example kicks the jQuery plugin here, but you can put the logic in your custom layout file instead.)

   jQuery(document).ready(function($) {
       $('#slider').nivoSlider();
   });
   

   

This Nivo Slider layout shows you how you can use Joomla Article and Joomla Category to implement jQuery Gallery plugin quickly with Views for Joomla.

You probably need to resolve the issue that your Joomla site displays the articles for Nivo Slider in the search result page. I was going to develop a search plugin to resolve the issue, but someone has already made one so I plan to use it as long as it works (Check out the search plugin).