Jquery slideshow integrate play/pause button

Hello Experts .!
I am using a modified version of jquery featured list slideshow (http://jqueryglobe.com/labs/feature_list/) in my web page. Currently it pauses on hove the tabs but i want it to pause and play on click of a button.I don't know where to start as I am a beginner to writing script. Any help will be appreciated.I have attached the js file
the css is below
/* Featured List Css	*/	

h3 {

			margin: 0;	

			padding: 7px 0 0 0;

			font-size: 16px;

			text-transform: uppercase;

		}



		div#feature_list {

			width: 900px;

			height: 900px;

			overflow: hidden;

			position: relative;

		}



		div#feature_list ul {

			position: absolute;

			top: 0;

			list-style: none;	

			padding: 0;

			margin: 0;

		}



		ul#tabs {

			left: 0;

			z-index: 2;

			width: 1024px;
                        

		

		}



		ul#tabs li {

			font-size: 13px; /* TO change size of list in departments page*/

			font-family: Arial;

			background: url(images/marker.gif) no-repeat 0% 10px;

		}

		.list li {

		background: url(images/marker.gif) no-repeat 0% 10px;

		padding: 0 0 0 6px;

		line-height: 1.667em;

		color: #fc0078;

	}

		

		ul#tabs li img {

			padding: 5px;

			border: none;

			float: bottom;

			margin: 20px -60px 0px 20px;
                        /* margin: 20px -100px 0px 60px; */

		}



		ul#tabs li a {
 color: #bbb; font-size: 12px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; 

			

		}



		ul#tabs li a:hover {

			text-decoration: underline;

		}



		ul#tabs li a.current {

			background:  url('feature-tab-current.png');

			color: #000; /*color of text*/

		}



		ul#tabs li a.current:hover {

			text-decoration: none;

			cursor: default;

		}



		ul#output {

			right: 0;

			width: 600px; /* change this first -To change the width of the content being displayed */

			height: 80px; <!-- was less before -->

			position: relative;

		}



		ul#output li {

			position: absolute;

			width: 600px;/* change this after changing the one above -To change the width of the content being displayed */

			height: 50px;

				font-size: 12px;

		}



		ul#output li a {

			position: absolute;

			bottom: 10px;

			right: 10px;

			padding: 8px 12px;

			text-decoration: none;

			font-size: 16px;

			color: #FFF;

			background: #000;

			-moz-border-radius: 5px;

		}

		

		ul#output li a:hover {

			background: #D33431;

		}

/*end */
#textSlide                              { padding: 10px 0px; }
#textSlide h3                           { font: 20px Georgia, Serif; }
#textSlide h4                           { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
#textSlide ul                           { list-style: disc; margin: 0 0 0 25px; }
#textSlide ul li                        { display: list-item; }

#quoteSlide                             { padding: 30px; }
#quoteSlide blockquote                  { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
#quoteSlide p                           { text-align: center; }
/*
    This stuff is for the TitleBlock Plugin
*/
.image                                  { position: relative; margin-bottom: 20px; width: 100%; }
.image h2                               { position: absolute; top: 220px; left: 0; width: 100%; }
.image h2 span                          { color: white; font: bold 10px/20px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 6px 8px; }
.image h2 span.spacer                   { padding: 0 2px; background: none; }

#page-wrap                              { width: 400px; padding: 15px; background: white; margin: 0 auto 10px; position: relative; }

Open in new window

jquery.featureList-1.0.0.js
screen.png
index-2.php
vravi22Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Do you want to pause the automatic movement of the tabs when you hove on the tabs?
0
vravi22Author Commented:
No I want to put a play/pause button so the slide show pauses until I click  play again..!
0
StealthyDevCommented:
Oh, well.. There are no inbuilt function for that in your plugin.

So, just change the plugin JS file with the below file:

All you need to do is this:
$('#tabs li a').changeTransition_interval(0); // To stop
$('#tabs li a').changeTransition_interval(5000); // To start with the required interval.

Best Regards.
jquery.featureList-1.0.0.js
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

vravi22Author Commented:
I need a button to play / pause. thats my requirement . I cannot ask user to click on the tab to stop.sorry
0
StealthyDevCommented:
Hi again.. I meant to say that you can call the changeTransition_interval function to stop or start. Using a click event (any button).

See the attached code here: Pause and Start button added.

Regards.

jquery.featureList-1.0.0.zip
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vravi22Author Commented:
That is awesome.Thanks a ton .that works great except for one minor problem .if you pause and mouse over the content or  mouse over the tabs and move out ,it starts to flicker. Thanks again. I hope this wont be that big a problem to solve.
0
vravi22Author Commented:
I m very pleased with the patience of the expert in understanding and helping me solve my problem. Thanks again .
0
StealthyDevCommented:
Oh, well I understand your problem. Please find the attached JS file. Hope this solves that problem.

Best Regards.

jquery.featureList-1.0.0.js
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.