Login / Logout



Advertisement

How to use Nivo Slider with Views for Joomla

Sample use of Views for Joomla with jQuery Gallery Plugin

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

    Views for Joomla - Nivo Slider Layout
  5. Set the module settings as follows:

    Views for Joomla - Nivo Slider Setting 1

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

    Views for Joomla - Nivo Slider Setting 2

    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();
    });
    

    Views for Joomla - Nivo Slider Setting 3

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

About the Author

Hiro Nozu

Hiro Nozu is a web developer who specializes in building CMS websites with Joomla. He has been in the field for over 10 years, and has been loving every minute of it. Check out some of his past work. He developed the extension Easy Search after the 3 months of involvement in the CMS at iFactory.

Comments (0)

Leave a comment

Please login to leave a comment. Optional login below.