<b7-gallery>

'Anchor tag based graceful fallback' practice using b7-gallery

<b7-gallery trigger-selector='a'></b7-gallery>

<a href="https://picsum.photos/1920/1080?image=10">
    <img src="https://picsum.photos/100/100?image=10"/>
</a>
<a href="https://picsum.photos/1920/1080?image=11">
    <img src="https://picsum.photos/100/100?image=11"/>
</a>
<a href="https://picsum.photos/1920/1080?image=12">
    <img src="https://picsum.photos/100/100?image=12"/>
</a>
<a href="https://picsum.photos/1920/1080?image=13">
    <img src="https://picsum.photos/100/100?image=13"/>
</a>
<a href="https://picsum.photos/1920/1080?image=14">
    <img src="https://picsum.photos/100/100?image=14"/>
</a>

Demo

<style>
    img {
        width: 100px;
    }
</style>

<b7-gallery trigger-selector='img.gallery-item' url-attribute='data-url'></b7-gallery>

<img class="gallery-item"
    src="https://picsum.photos/100/100?image=10"
    data-url="https://picsum.photos/1920/1080?image=10"/>
<img class="gallery-item"
    src="https://picsum.photos/100/100?image=11"
    data-url="https://picsum.photos/1920/1080?image=11"/>
<img class="gallery-item"
    src="https://picsum.photos/100/100?image=12"
    data-url="https://picsum.photos/1920/1080?image=12"/>
<img class="gallery-item"
    src="https://picsum.photos/100/100?image=13"
    data-url="https://picsum.photos/1920/1080?image=13"/>
<img class="gallery-item"
    src="https://picsum.photos/100/100?image=14"
    data-url="https://picsum.photos/1920/1080?image=14"/>

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.