Carousel
This pattern contains:
atoms-thumbnail
HTML
<div id="thumbContainer" class="entry-message">
<ul class="pagination thumbnail">
<li class="outOfRange">
<a href="/albums/5823881448034071153/images/?offset=-14" class="prev">
back
</a>
</li>
<li class="outOfRange pipeDivider"> | </li>
<li>
<a href="/albums/5823881448034071153/images/?offset=14" class="more">
more
</a>
</li>
</ul>
<ul id="thumbs"><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li><li><a href="/images/fpo_4x3.png"><img src="../../images/fpo_thumbnail.png" alt="Thumbnail" data-preview="/images/fpo_4x3.png" />
</a></li></ul>
<ul class="pagination thumbnail">
<li class="outOfRange">
<a href="/albums/5823881448034071153/images/?offset=-14" class="prev">
back
</a>
</li>
<li class="outOfRange pipeDivider"> | </li>
<li>
<a href="/albums/5823881448034071153/images/?offset=14" class="more">
more
</a>
</li>
</ul>
</div>
Preview
This pattern contains:
atoms-landscape-4x3
HTML
<div id="imageContainer" class="image" style="height: 1202px;">
<a href="../../images/fpo_4x3.png">
<div class="preview" style="display: inline; width: 600px; height: 1200px;">
<img src="../../images/fpo_4x3.png" alt="4x3 Image" />
<canvas height="400" width="600" style="height: 400px; width: 600px;"></canvas>
</div>
</a>
<img id="preview_loading" src="/resources/thirdparty/travi-styles/img/progress/large-loading.gif" style="display: none;">
</div>