Include play ,pause, next, previous functions alltogether for content gliding?

[Ramya_hv]

Hi All,

Script title: "Featured Content Glider"

Script Link:http://www.dynamicdrive.com/dynamici...tentglider.htm

Concern:
I could use the next and previous function in there, but for the same script how do we add play and pause function for content sliding, not for images.Aswell i see the number of slides stops after 2 cycles,untill we refresh it.

How do we make it keep sliding always, if required it should be paused and then made to play without any number of cycles.

I do not know how to code,If any one could help.


Thank You,

[ddadmin]

Well, you can easily set the script to cycle indefinitely by setting the below variable in your invocation code:

	autorotateconfig: [3000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

In other words, set the 2nd parameter to 0.

Regarding a "play" and "pause" button, I'll have to add that as something to possibly add to the script the next time it's updated. The script was just updated yesterday for another feature.

[Varen]

I'd love to see a Start/Stop button added too. It would make this script much more useful to me. Thanks!

[arkadyan]

I've extended the Featured Content Glider code to allow for a pause button that stops and restarts the glider.

I've attached a patch file for the featuredcontentglider.js file to add this extensions.

To use the pause button you need to add the configuration for it to the featuredcontentglider.init section in your main html code (see pauseid). Here's an example:

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	pauseid: "pause", //ID of the pause container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 300, //Glide animation duration (in milliseconds)
	direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland. 
</div>

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
<a id="pause">
	<img src="images/but_pause.gif" alt=" Pause Button" width="14" height="11" border="0"/>
</a>

Note that the pause button link (or div or whatever) must be outside of the "p-select" element. I used css, however, to position the button on my page between the Previous and Next buttons.

[Sovereign]

On this part in the js.txt file:

-	cancelautorotate:function(togglerid){
-		if (window[togglerid+"timer"])
-			clearInterval(window[togglerid+"timer"])
+	cancelautorotate:function(config){
+		if (window[config.togglerid+"timer"])
+			clearInterval(window[config.togglerid+"timer"])
+			config.paused = true;
 	},

I think it should be this:

-	cancelautorotate:function(togglerid){
-		if (window[togglerid+"timer"])
-			clearInterval(window[togglerid+"timer"])
+      },
+	cancelautorotate:function(config){
+		if (window[config.togglerid+"timer"])
+			clearInterval(window[config.togglerid+"timer"])
+			config.paused = true;
 	},

Basically one little bracket and a comma added. After I did that, the script worked fine (no errors in IE).

BUT, now that that's error free, it's not operating as it should. I have 4 images and a cycle of [1] and page 1 fades in, then to page 3, then to page 1 and then it stops?

Any suggestions?

If anybody thinks I may have copied it wrong, I will check it a third time, unless you may know the issue could be related to something else.

[Sovereign]

If I click the pause button once, it goes through all 4 pages and then stops (1 cycle).

Thanks!

[Sovereign]

Just wanted to see if anyone could help me, as this is still a problem. I won't bump it anymore after this - promise.

Thanks you.