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');
> > });
> > */
> > });
