当底层图像滑开时隐藏滑块中的标题文本#mootools

发布于 2024-11-04 07:09:10 字数 1257 浏览 3 评论 0原文

我对 mootools 不太熟悉，但我正在实现一个图像滑块，我想在其上添加一些标题。到目前为止，这是有效的，但是当图像滑开时，标题仍然存在...如果下一张图像带有新标题，则标题会滑过前一张图像...这是图像被隐藏的代码段，我认为我也可以隐藏标题...

initialize: function(menu, images, loader, options){
this.parent(menu, options);
this.images = $(images);
this.imagesitems = this.images.getChildren().fade('hide');
$(loader).fade('in');
new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
  this.loaded = true;      
  $(loader).fade('out');
  if (this.current) this.show(this.items.indexOf(this.current));
  else if (this.options.auto && this.options.autostart) this.progress();
}.bind(this) });
if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
},

//And here is the HTML (and PHP-Codeigniter):

<li class="relative">
<p class="slogan"><span class="highlight"><?=$latestItem->slogan?><br/><a href="#">Lees meer &raquo;</a></span></p>
<img src="<?= $latestItem->picture ?>" alt="<?=$latestItem->title ?>" title="<?=$latestItem->title ?>" />
</li>

任何人都可以帮我弄清楚如何让标题与相应的图像一起消失吗？

原文

I'm not too familiar with mootools but i'm implementing an image slider on which i want to add some captions. So far that works but when the image slides away, the captions remain... If the next image slides on with the new caption, the caption slides over the previous one... This is the piece of code where the image gets hidden and where i think i could hide the captions as well...

initialize: function(menu, images, loader, options){
this.parent(menu, options);
this.images = $(images);
this.imagesitems = this.images.getChildren().fade('hide');
$(loader).fade('in');
new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
  this.loaded = true;      
  $(loader).fade('out');
  if (this.current) this.show(this.items.indexOf(this.current));
  else if (this.options.auto && this.options.autostart) this.progress();
}.bind(this) });
if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
},

//And here is the HTML (and PHP-Codeigniter):

<li class="relative">
<p class="slogan"><span class="highlight"><?=$latestItem->slogan?><br/><a href="#">Lees meer »</a></span></p>
<img src="<?= $latestItem->picture ?>" alt="<?=$latestItem->title ?>" title="<?=$latestItem->title ?>" />
</li>

Can anyone help me figure out how i can manage to let the captions dissapear together with the corresponding image?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白首有我共你 2024-11-11 07:09:11

var foo = new Class({
    initialize: function(menu, images, loader, options) {
        this.parent(menu, options);
        this.images = $(images);
        this.imagesitems = this.images.getChildren().fade('hide');
        $(loader).fade('in');
        new Asset.images(this.images.getElements('img').map(function(el) {
            el.getPevious().setStyle("display", "none");
            return el.setStyle('display', 'none').get('src');
        }), {
            onComplete: function() {
                this.loaded = true;
                $(loader).fade('out');
                if (this.current) this.show(this.items.indexOf(this.current));
                else if (this.options.auto && this.options.autostart) this.progress();
            }.bind(this)
        });
        if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
    }
});

在您的标记中，标题是紧邻图像之前的

标记，因此回调中的 el.getPrevious() 将引用该标记 - 尽您所能:)

ps尝试更好地格式化你的问题

var foo = new Class({
    initialize: function(menu, images, loader, options) {
        this.parent(menu, options);
        this.images = $(images);
        this.imagesitems = this.images.getChildren().fade('hide');
        $(loader).fade('in');
        new Asset.images(this.images.getElements('img').map(function(el) {
            el.getPevious().setStyle("display", "none");
            return el.setStyle('display', 'none').get('src');
        }), {
            onComplete: function() {
                this.loaded = true;
                $(loader).fade('out');
                if (this.current) this.show(this.items.indexOf(this.current));
                else if (this.options.auto && this.options.autostart) this.progress();
            }.bind(this)
        });
        if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
    }
});

in your markup, the caption is a <p> tag immediately before the image so el.getPrevious() in your callback will reference that- do your worst :)

p.s. try to format your questions a little better

回复收藏 0 原文

~没有更多了~