it has a show method. myInstance.show(index);
see the docs: http://www.clientcide.com/docs/Layout/SimpleSlideShow#SimpleSlideShow:show On Fri, Jan 8, 2010 at 2:00 PM, reddrumhead <[email protected]> wrote: > Thanks Aaron, that was very helpful. > > Do you know if there is a way to make the SimpleSlideShow animate to a > specified element rather than just rotate to the next slide? Something > like: > > var slideShow = new SimpleSlideShow.Carousel($('slideshow-container'), > { > startIndex: 0, > slides: $$('#slideshow-container div'), > nextLink: 'slide-next', > prevLink: 'slide-prev' > }); > > slideShow.goto('div1'); > > I couldn't find anything in the documentation. If this is not > possible, SimpleSlideShow will not work for my needs. > > On Jan 8, 12:47 pm, Aaron Newton <[email protected]> wrote: > > Can I suggest two things: > > > > 1) put this in mooshell, so that others can edit it > > 2) check out this plugin: > > > > http://www.clientcide.com/wiki/cnet-libraries/08-layout/04-simpleslid... > > > > source: > http://github.com/anutron/clientcide/blob/master/Source/Layout/Simple... > > > > On Fri, Jan 8, 2010 at 9:31 AM, reddrumhead <[email protected]> > wrote: > > > I have created a horizontally scrolling "slideshow" of sorts using > > > Fx.Scroll. When you click "RIGHT" it should scroll right until it > > > reaches the last element in the container (which is "SIX"), at which > > > point it should scroll back to element "ONE". > > > > > Unfortunately, when "RIGHT" is clicked the first time, it scrolls to > > > "TWO" which is correct. But then when you click it again, it does > > > nothing. Click it a third time it scrolls to "THREE". Fourth time does > > > nothing. Fifth time, it scrolls to "FOUR". Finally, clicking it for > > > the sixth time, it scrolls back to "ONE". > > > > > It would appear that the scroll is only working on every second click. > > > > > I'm stumped. I would really appreciate any insight anyone can offer, > > > Thanks! > > > > > Live demo is at:http://kineticdesignlabs.com/test/ > > > > > HTML: > > > <div class="boxes"> > > > <div class="wrapper"> > > > <div class="left" style="margin-right: 20px;"> > > > <!-- <a href="" > > > id="go-left">LEFT</a><br><br> --> > > > <a href="" id="go-right">RIGHT</a> > > > </div> > > > > > <div id="box-container"> > > > <div class="box-wrapper"> > > > <div class="box" > id="1">ONE</div> > > > <div class="box" > id="2">TWO</div> > > > <div class="box" > id="3">THREE</div> > > > <div class="box" > id="4">FOUR</div> > > > <div class="box" > id="5">FIVE</div> > > > <div class="box" > id="6">SIX</div> > > > </div> > > > <div class="cleaner"></div> > > > </div> > > > <div class="cleaner"></div> > > > </div> <!-- close wrapper --> > > > </div> <!-- close boxes --> > > > > > CSS: > > > .boxes{ > > > width: 100%; > > > height: 390px; > > > background-color: #fff; > > > margin: 0; > > > } > > > > > .wrapper{ > > > width: 960px; > > > position: relative; > > > left: 50%; > > > margin-left: -480px; > > > } > > > > > #box-container{ > > > width: 860px; > > > height: 390px; > > > overflow: hidden; > > > margin-right: 20px; > > > } > > > > > .box-wrapper{ > > > width: 20000px; > > > height: 390px; > > > } > > > > > .box-wrapper .box{ > > > width: 880px; > > > height: 390px; > > > float: left; > > > display: inline; > > > background: #ccc; > > > border: 1px solid #ddd; > > > } > > > > > .left{ > > > float: left; > > > } > > > > > .right{ > > > float: right; > > > margin-left: 20px; > > > } > > > > > .cleaner{ > > > clear: both; > > > height: 0px; > > > font-size: 0px; > > > border: none; > > > margin:0px; > > > padding: 0px; > > > background:transparent; > > > } > > > > > JAVACRIPT: > > > window.addEvent('domready', function(){ > > > var currentBox = 0; > > > var boxArray = $$('#box-container > > > .box-wrapper').getElements > > > ('div'); > > > > > var scrollBox = function(dir){ > > > if(dir == 'right'){ > > > currentBox++; > > > }else{ > > > currentBox--; > > > } > > > > > var boxScroll = new > > > Fx.Scroll('box-container',{ > > > duration: 500, > > > transition: > > > Fx.Transitions.Sine.easeOut, > > > wheelStops: false, > > > onStart: function(){ > > > }, > > > onComplete: function(){ > > > } > > > }); > > > > > if(currentBox == > > > boxArray[0].length){ > > > currentBox = 0; > > > boxScroll.toLeft(); > > > }else if(currentBox <= 0 && dir > == > > > 'left'){ > > > currentBox = > > > boxArray[0].length - 1; > > > > > boxScroll.toElement(boxArray[0][boxArray[0].length - 1]); > > > }else{ > > > > > boxScroll.toElement(boxArray[0][currentBox]); > > > } > > > } > > > > > $('go-right').addEvent('click', > function(e){ > > > e.stop(); > > > scrollBox('right'); > > > }); > > > > > /* > > > $('go-left').addEvent('click', function > > > (e){ > > > e.stop(); > > > scrollBox('left'); > > > }); > > > */ > > > }); >
