• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1319
  • Last Modified:

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
0
vravi22
Asked:
vravi22
  • 4
  • 4
1 Solution
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now