We are going to create two instances of our ImageCaption
class on the same web page to outline just how powerful creating plugins can be.
We're still going to use the same HTML markup and just build on top of the code we already have from the preceding example. We create a new instance called
captionNormal
, and then use this instance for all other images that don't have the ID of#caption-on-top
.var captionOnTop = new ImageCaption($$('#caption-on-top'), { captionPosition: 'before' }); var captionNormal = new ImageCaption($$('img[id!=caption-on-top]'), { captionPosition: 'after' });
Test your work in a web browser. You should see that the other images will have their caption text after the
img
element.