Skip to content

Commit

Permalink
Add a tip for adding images to an album via JavaScript
Browse files Browse the repository at this point in the history
This is often useful for Markdown posts or CMS articles.
  • Loading branch information
Calinou committed Jan 6, 2021
1 parent 9e192d0 commit fd5ea53
Showing 1 changed file with 22 additions and 0 deletions.
22 changes: 22 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,28 @@ Instead of a thumbnail, you can also refer to a larger image with a text link:
</a>
```

If you use a Markdown parser or CMS and want to make all images in a post
automatically viewable in a lightbox, use the following JavaScript code to add
all images to the same album:

```javascript
document.addEventListener('DOMContentLoaded', () => {
// This assumes your article is wrapped in an element with the class "content-article".
document.querySelectorAll('.content-article img').forEach((articleImg) => {
// Add lightbox elements in blog articles for Tobii.
const lightbox = document.createElement('a');
lightbox.href = articleImg.src;
lightbox.classList.add('lightbox');
lightbox.dataset.group = 'article';
articleImg.parentNode.appendChild(lightbox);
lightbox.appendChild(articleImg);
});
});
```

Alternatively, depending on your Markdown parser or CMS, it may be possible to
customize its output to add the markup on the server-side.

### Inline HTML

[Play on CodePen](https://codepen.io/rqrauhvmra/pen/BOLxqj)
Expand Down

0 comments on commit fd5ea53

Please sign in to comment.