Demo #1 | Demo #2 | Demo #3 | Mockup | ReadMe | Github Repo | Download

Two u-gallery elements with covers (each containing a gallery of u-photo elements)





(Click the ReadMe link up top for a thorough run-down)

HTML example for this gallery:

<head>

<script src="file/jquery.min.js"></script>
<script src="file/webcomponents-lite.js"></script>
<link rel="stylesheet" href="file/lightbox.css">
<link rel="import" href="file/u-photo.html">
<link rel="import" href="file/u-gallery.html">

</head>

<body>

<u-gallery percent="90" cover="images/plazorama.png" about="Late Night" album="testalbum" grid="4" gap="20" frame="light">

<u-photo image="images/chicago01.jpg" about="Addison"></u-photo>
<u-photo image="images/chicago02.jpg" about="Addison"></u-photo>
<u-photo image="images/chicago03.jpg" about="North/Clybourn"></u-photo>
...

</u-gallery>

<u-gallery percent="90" cover="images/trainorama.jpg" about="Red Line" album="testalbum2" grid="6" frame="light">

<u-photo image="images/chicago07.jpg" about="Lake"></u-photo>
<u-photo image="images/chicago08.jpg" about="Grand"></u-photo>
<u-photo image="images/chicago09.jpg" about="North/Clybourn"></u-photo>
...

</u-gallery>

<script src="file/lightbox.min.js"></script>

</body>