php - Hide caption text in slider when underlying image slides away #mootools

12

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 >
<p ><span ><?=$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?

406

Answer

Solution:

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 soel.getPrevious() in your callback will reference that- do your worst :)

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

People are also looking for solutions to the problem: elasticsearch - _update_by_query in elasticserach-php client

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.