A more or less personal project but you can use it if you like it. You can find it on Bower, too.
Live Example: http://lumion3d.de/galerie
- Show the same image in a viewbox (short):
<img data-imageViewer data-target="~/image.png" src="/thumbnail.png" title="Description" />
- Show an image in the viewbox (long):
<a data-imageViewer href="~/image.png" title="Description">
<img src="~/thumb.png" />
</a>
- Show video in viewbox (supports youtube and vimeo):
<a data-imageViewer href="https://noJavascript.Link" data-target="k3tQaWxaLzM" data-type="youtube">
<img src="~/thumb.png" />
</a>
- Show iframe content in the viewbox (+optional loading-thumb):
<a data-imageViewer data-type="iframe" data-target="https://www.google.de/" data-thumb="~/loading-thumb.png">
<img src="~/thumb.png" />
</a>
- Show iframe content without loading (default mode if not image: just display/load any kind of target):
<a data-imageViewer data-target="https://www.google.de/">
<img src="~/thumb.png" />
</a>
- Show html content in the viewbox:
<a data-target="#html" data-imageViewer title="4Players">
<img src="~/thumb.png" />
</a>
<div id="html" hidden>
<span>Hello World!</span>
</div>
- Grouping things (for example for galleries):
<a data-imageViewer="group1" href="~/image1.png" title="Description 1">
<img src="~/thumb.png" />
</a>
<div data-imageViewer="group1" data-target="~/image2.png" title="Description 2" ></div>
<div data-imageViewer="group1" data-target="k3tQaWxaLzM" data-type="youtube" title="Description 3" ></div>