{{> examples_clearing_data_options}}
+### Available Javascript Events
+
+Clearing supports several javascript events that you can listen to:
+
+<ul>
+ <li><code>open.clearing.fndtn</code> before a thumbnail is expanded</li>
+ <li><code>opened.clearing.fndtn</code> after the large image has opened</li>
+ <li><code>close.clearing.fndtn</code> before the large image is closed</li>
+ <li><code>closed.clearing.fndtn</code> after the large image has closed</li>
+ <li><code>change.clearing.fndtn</code> when the large image changes</li>
+ <li><code>resized.clearing.fndtn</code> after the large image is resized, before it becomes visible</li>
+</ul>
+
+<p>Here is an example of binding to the open event.</p>
+
+<h4>JS</h4>
+
+{{> examples_clearing_events}}
+
***
### Sass Errors?
target.siblings().removeClass('visible');
target.addClass('visible');
});
+ visible_image.trigger('opened.fndtn.clearing')
}
if (!this.locked()) {
+ visible_image.trigger('open.fndtn.clearing');
// set the image to the selected thumbnail
image
.attr('src', this.load($image))
.css('visibility', 'hidden');
startLoad.call(this);
-
}
},
body.css('overflow', '');
container = $('div', root).first();
visible_image = $('.visible-img', container);
+ visible_image.trigger('close.fndtn.clearing');
this.settings.prev_index = 0;
$('ul[' + this.attr_name() + ']', root)
.attr('style', '').closest('.clearing-blackout')
.removeClass('clearing-blackout');
container.removeClass('clearing-container');
visible_image.hide();
+ visible_image.trigger('closed.fndtn.clearing');
}
return false;
if (image.length) {
this.center_and_label(image, label);
+ image.trigger('resized.fndtn.clearing')
}
},
if (target.length) {
this.S('img', target)
- .trigger('click', [current, target]);
+ .trigger('click', [current, target])
+ .trigger('change.fndtn.clearing');
}
},