Looking into the JQuery Roundabout Plugin

I have been using JQuery for a couple of years now and it has helped me to solve many problems on the client side of web development. You can find all my posts about JQuery in this link. In this post I will be providing you with a hands-on example on the JQuery Roundabout Plugin.

This is a plugin that supports circular rotating display for content. It supports autoplay.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.

You can use Visual Studio 2013 Express edition. You can download it here. 

You can download this plugin from this link.

I launch Expression Web 4.0 and then I type the following HTML markup (I am using HTML 5)

<!DOCTYPE html>

<html>

<head>

    <title>JQuery Roundabout Plugin </title>

 

    <style>

ul {

margin: 1em auto;

width:700px;

height: 300px;

    list-style: none;

}

li {

             

text-align: center;

height: 300px;

width: 700px;

background-color:#eee;

color:#565748;

  }

    </style>

 

 

    <script src="jquery-2.0.2.min.js"></script>

    <script src="jquery.roundabout.min.js"></script>

    

    <script type="text/javascript">

         $(function () {

             $('ul').roundabout({ minOpacity: .1, minScale: .1 });

         });

     </script>

</head>

<body>

<div>

    <ul>

        <li>

            <h2>Manchester Utd</h2>

           <p>Manchester United Football Club is an English professional football club, based in Old Trafford, Greater Manchester that plays in the Premier League. Founded as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester United in 1902 and moved to Old Trafford in 1910 and is one of the most successful clubs in English football.Manchester United have won the most League titles (20) of any English club,[3] a joint record 11 FA Cups, four League Cups, and a record twenty FA Community Shields. The club has also won three European Cups, one UEFA Cup Winners' Cup, one UEFA Super Cup, one Intercontinental Cup, and one FIFA Club World Cup. In 1998–99, the club won a continental treble of the Premier League, the FA Cup and the UEFA Champions League..</p> 

            <p>Sed urna ligula, tristique ut accumsan in, condimentum quis quam. Nam pharetra erat at lacus 

            sagittis sagittis.  </p>

            <a href="http://www.manutd.com/">Man Utd</a> 

        </li>

        <li>

            <h2>Liverpool FC</h2>

            <p>Liverpool Football Club /ˈlɪvərpuːl/ is an English Premier League football club based in Liverpool. Liverpool F.C. is one of the most successful clubs in England and has won more European trophies than any other English team with five European Cups, three UEFA Cups and three UEFA Super Cups. The club has also won eighteen League titles, seven FA Cups and a record eight League Cups.

Liverpool was founded in 1892 and joined the Football League the following year. The club has played at Anfield since its formation. The most successful period in Liverpool's history was the 1970s and '80s when Bill Shankly and Bob Paisley led the club to eleven league titles and seven European trophies. Cras vitae nibh 

            ac augue pellentesque malesuada. Maecenas ultricies vitae dui quis tincidunt. Curabitur 

            ut sagittis lorem. Nam eros sapien, aliquet pharetra iaculis quis, ullamcorper ut mi.

            Sed urna ligula, tristique ut accumsan in, condimentum quis quam. Nam pharetra erat at lacus 

            sagittis sagittis. </p> 

            <a href="http://www.liverpoolfc.com/">Liverpool FC</a>

        </li>

<li>

            <h2>Everton FC</h2>

           

            <p>Everton Football Club /ˈɛvərtən/ are an English Premier League football club based in Liverpool. The club have competed in the top division for a record 110 seasons (missing only four seasons, all at level 2) and have won the League Championship nine times.[3]

 

Formed in 1878, Everton were founding members of The Football League in 1888 and won their first league championship two seasons later. Following four league titles and two FA Cup wins, Everton experienced a lull in the immediate post World War Two period until a revival in the 1960s which saw the club win two league championships and an FA Cup. The mid-1980s represented their most recent period of success, with two League Championship successes, an FA Cup, and the 1985 European Cup Winners' Cup. The club's most recent major trophy was the 1995 FA Cup. The club's supporters are known as Evertonians.</p>

    <a href="http://www.evertonfc.com/">Everton FC</a>

        </li>

    </ul>

</div>

</body>

</html>

I have included the JQuery file and the JQuery Roundabout plugin file in the head section.

I have some content in an unordered list and some internal styles to give them some basic styling.The markup and the styles are pretty basic.

Have a look at the picture below to see the plugin in action.

 The only javascript code I need to have this effect (roundabout) is the following

<script type="text/javascript">

         $(function () {

             $('ul').roundabout({ minOpacity: .1, minScale: .1 });

         });

     </script>

You can set options on Roundabout to change how it behaves.We do this by passing in an object of options into the main Roundabout call upon initialization.

For more options regarding this plugin visit this link

Hope it helps!!!

No Comments