Animated Collapse DIV - Desiring Next and Previous Buttons

1) Script Title: Animated Collapse DIV - Desiring Next and Previous Buttons

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

Hi ALL,

I am using a script that probably has the code already inside it just not enabled and I am not good at all with Javascript...

Can anyone look at this javascript code and tell me how 1.) I could add a PREV and NEXT overlay image button(s) where someone clicks would go forward or backwards?

and 2.) Also if there is a way to add a javascript code snippet to make the main section auto-rotate like a slideshow and pause when hovered or the dropdown area has been opened and not start back until the mouse is out of the animated div content area...

Thanks in advance,
Jay

These are my 3 toggle divs and I just want them to also have previous & next buttons plus pause on mouseover and when expanded and resume after leaving the content area...

animatedcollapse.addDiv('slide1', 'fade=1,speed=400,group=sshow')
animatedcollapse.addDiv('slide2', 'fade=1,speed=400,group=sshow')
animatedcollapse.addDiv('slide3', 'fade=1,speed=400,group=sshow')

So you want a prev and next to switch between the open next (or prev) div and slide down current div?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <!DOCTYPE HTML> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="animatedcollapse.js"> /*********************************************** * Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets') animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1') animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1') animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted //$: Access to jQuery //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID //state: "block" or "none", depending on state } animatedcollapse.init() </script></head> <body> <input type="button" name="" value="Next" onclick="zxcSlideShow.Next('cat',1);"/> <input type="button" name="" value="Back" onclick="zxcSlideShow.Next('cat',-1);"/> <div style="width:400px;background-Color:red;" onmouseover="zxcSlideShow.Pause('cat');" onmouseout="zxcSlideShow.Auto('cat');" > <p><b>Example 4 (part of group "pets"):</b></p> <a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a> <div id="cat" style="width: 400px; background: #BDF381;"> The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands. </div> <p><b>Example 5 (part of group "pets"):</b></p> <a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a> <div id="dog" style="width: 400px; background: #BDF381;"> The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures. </div> <p><b>Example 6 (part of group "pets"):</b></p> <a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a> <div id="rabbit" style="width: 400px; background: #BDF381"> Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. </div> </div> <script type="text/javascript"> /*<![CDATA[*/ var zxcSlideShow={ Next:function(id,ud){ var o=this[id],ud=typeof(ud)=='number'&&ud<0?-1:1; if (o){ this.rotate(o,ud); } }, Auto:function(id,ms){ var oop=this,o=this[id]; if (o){ o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200); } }, Pause:function(id){ var o=this[id]; if (o){ clearTimeout(o.to); } }, init:function(o){ var a=o.IDArray,h=o.AutoHold,s=o.AutoStart,z0=0; for (var z0=0;z0<a.length;z0++){ this[a[z0]]=o; } o.a=a; o.h=typeof(h)=='number'&&h>500?h:2000; typeof(s)=='number'&&s>500?this.Auto(a[0],s):null; }, rotate:function(o,a){ this.Pause(o.a[0]); for (var d,c=0,lgth=o.a.length-1,z0=0;z0<=lgth;z0++){ d=document.getElementById(o.a[z0]); if (d&&d.style.display!='none'){ c=z0; break; } } if (o.a[c]){ a===true?c++:c+=a; c=c<0?lgth:c>lgth?0:c; animatedcollapse.showhide(o.a[c],'toggle'); a===true?this.Auto(o.a[0],2000):null } } } zxcSlideShow.init({ IDArray:['cat','dog','rabbit'], AutoHold:2000, AutoStart:2000 }); /*]]>*/ </script> </body> </html>