Question

我正在寻找一个Mootools幻灯片，它可以通过计时器（普通幻灯片功能）更改主图片，并且有一个可点击的缩略图列表。因为我在网站上有许多其他的mootools功能，所以幻灯片必须是mootools。

我找到了两个选项：

scrollgallery2.mashitup.de（这是this的第2版） - 如何让它开始播放幻灯片？（它停在第一张图片中）
github.com/jakobholmelund/SpinSlider（Jakob改编自jQuery幻灯片） - .js文件缺少拇指代码。有关如何将jQuery想法合并/转换为Mootools的任何想法吗？（见下文）

jQuery版本：

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();
}

由Jakob Holmelund改编的Mootools：

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();
    }

有任何建议如何解决其中一个问题？或任何其他幻灯片的想法？

Answer 1

以下是我在Jakobs文件的.js上添加的新代码。对幻灯片的下一个版本也许有用。

在JS文件中：
（这会增加容量以查看幻灯片中是否有img并将缩略图添加到<li> CSS背景图像）

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();
    }

然后添加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;
}

Answer 2

不是重新发明轮子，而是使用已经存在的东西可能更容易。我快速浏览了MooTools forge（http://mootools.net/forge/browse?search=gallery），发现了以下内容：

http://software.bmo-design.de/scrollgallery.html

我在这个项目上修改了非常棒的http://www.electricprism.com/aeron/slideshow/：http://treecareenterprises.com/c/tree-care-photo-gallery/?showonly=5

不幸的是我今天没有时间提取代码，但可以随意查看是否可以获取相关的花絮。此外，它看起来像是在v1.2.4上运行，您可能希望将其升级到1.4，这并不像看起来那样难以看到以下链接的指导：https://github.com/mootools/mootools-core/wiki/Upgrade-from-1.2-to-1.3-or-1.4

Mootools幻灯片适应

2 个答案: