0

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 &raquo;</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?

Rypens
  • 3
  • 1

1 Answers1

0
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

Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69
  • Thanks for the response... i'm gonna take a look at it right now! Sorry for the poor format of the questions, will try and think about that in the future! Thanks again! – Rypens May 03 '11 at 17:46
  • Just noticed a small typo in your code (just to let you know) - Pevious. Fixed that and then the slider hides the captions completely instead of together with the corresponding image... I'll try and work on that. I'll get back to you! – Rypens May 03 '11 at 17:58
  • When doing the following: `new Asset.images(this.images.getElements('img').map(function(el) { el.getPrevious().setStyle("display", "none"); return el.setStyle('display', 'none').get('src'); }),` The captions hare hidden completely...i also tried to return the el.getPrevious line, but also with no luck... any other ideas :)? – Rypens May 03 '11 at 18:16