Скрыть текст заголовка в слайдере, когда нижележащее изображение скользит прочь #mootools - PullRequest
Новая
       18

Скрыть текст заголовка в слайдере, когда нижележащее изображение скользит прочь #mootools

0 голосов
/ 03 мая 2011

Я не слишком знаком с 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>

Может кто-нибудь помочь мне понять, как мне удастся скрыть подписи вместе с соответствующим изображением?

1 Ответ

0 голосов
/ 03 мая 2011 
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);
    }
});

в вашей разметке, заголовок представляет собой тег <p> непосредственно перед изображением, поэтому el.getPrevious() в вашем обратном вызове будет ссылаться на это - сделайте ваше худшее:)

p.s. попробуйте отформатировать ваши вопросы немного лучше

...