Mootools slideshow adapting

Question

I'm looking for a Mootools slideshow that changes main picture with a timer (normal slideshow function) and has a clickable thumbnail list. Because I have many other mootools features in the site I am working so the slideshow has to be mootools.

I found two options:

• scrollgallery2.mashitup.de (which is a v.2 of this) - how to make it start the slideshow? (its stoped in the first picture)

• github.com/jakobholmelund/SpinSlider (which Jakob adapted from a jQuery slideshow) - the .js file is missing the thumbs code. Any ideas how to merge/translate the jQuery idea to Mootools?
  (see under)

jQuery version:

if (options.bulletThumbs) {
var thumbName = slides.eq(i).data('thumb');
if (thumbName) {
    var liMarkup = $('<li class="has-thumb">' + i + '</li>')
    liMarkup.css({
        "background": "url(" + options.bulletThumbLocation + thumbName + ") no-repeat"
    });
}
}

orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
liMarkup.data('index', i);
liMarkup.click(function () {
stopClock();
shift($(this).data('index'));
});
}
setActiveBullet();
}

Mootools adapted by Jakob Holmelund:

if(this.options.bullets){
        this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
        this.slides.each(function(slide, index){
            new Element("li",{text:index+1}).addEvent("click", function(){
                self._stopClock();
                self._spin(index);
            }).inject(self.bullets);
        });
        this._setActiveBullet();
    }

Any suggestions how to fix one of this? or any other slideshow idea?

Answer 1

Here is new code I added on the .js of Jakobs file. Maybe good for a next version of that slideshow.

In the JS file:
( this adds the capacity to see if a img is in the slide and adds thumbnail to the <li> CSS background-image)

if(this.options.bullets){
        this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
        this.slides.each(function(slide, index){
            var stl = '';
            if (!slide.hasChildNodes()) stl = 'background-image: url('+slide.getAttribute('src')+')';
            else if (slide.getChildren('img').length > 0) stl = 'background-image: url('+slide.getChildren('img')[0].get('src')+')'; 
            else if (slide.get('img')) stl = 'background-image: url('+slide.get('img').get('src')+')'; 

            new Element("li",{text:index+1, style: stl, class: ((stl != '')?"spin-bullets-img":"")}).addEvent("click", function(){
                self._stopClock();
                self._spin(index);
            }).inject(self.bullets);
        });
        this._setActiveBullet();
    }

Then add in the CSS:

.spin-bullets li.spin-bullets-img { 
width: 50px;
height: 25px;
background-position: center top;
background-size: 80px auto;
border:#CCC 4px solid;
}
.spin-bullets li.spin-bullets-img.active {
border:#88F 4px solid;
}