bdalziel

ul, li {
    /* Simple list reset */
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}

.gallerySlides {
    position: absolute;

bdalziel

.gallerySlide {
    display: inline-block;
    float: left;
    position: relative;
    vertical-align: top;

    /* Calculated via LESS based on parent .gallerySlides max capacity width
     * 5000% = 50 slides. 1 slide width = (100%/50) = 2%
     */
    width: 2%;

bdalziel

.galleryViewport {
    position: relative;
    width: 100%;
    height: 100%;
    white-space: nowrap; /* This makes sure the slides stack horizontally */
    overflow: hidden; /* We don't want scrollbars - we'll manage the overflow via gallery nav buttons moving the slides relative to this viewport */
}

bdalziel

<div class="galleryViewport">
    <ul class="gallerySlides">
        <li class="gallerySlide">...</li>
        <li class="gallerySlide">...</li>
    </ul>
    <a href="#" class="previous">Previous</a>
    <a href="#" class="next">Next</a>
</div>

bdalziel

<div class="slideBody">
    <div class="assetWrap">
        <a href="#">
            <img src="{src}" class="fullScreenUrl-{url} galleryUrl-{url} imgW-553 imgH-1000 bigImgW-1660 bigImgH-3000">
            <span class="decorator"></span>
        </a>
    </div>
</div>

bdalziel

    var sizeSlideAsset = function (slideNode) {
        var img = slideNode.one('.assetWrap img');
        var assetWrap = img.ancestor('.assetWrap');

        var wrapWidth = assetWrap.get('offsetWidth');
        var wrapHeight = assetWrap.get('offsetHeight');

        var imgWidth = Y.Util.getClassValue(img, 'imgW');
        var imgHeight = Y.Util.getClassValue(img, 'imgH');

bdalziel

li.gallerySlide .slideBody {
    height: 100%;
    /* Total width = 100% with padding */
    width: 80%;
    padding-left: 5%; /* nudge selected slide in from left */
    padding-right: 15%; /* PEEK */
    overflow: auto; /* think vertical scroll bars with small browser height */
}

li.gallerySlide .assetWrap {

bdalziel

.zoom-100 { .zoomStep(100%); }
.zoom-125 { .zoomStep(125%); }
.zoom-150 { .zoomStep(150%); }
.zoom-175 { .zoomStep(175%); }
.zoom-200 { .zoomStep(200%); }
.zoom-225 { .zoomStep(225%); }
.zoom-250 { .zoomStep(250%); }
.zoom-275 { .zoomStep(275%); }
.zoom-300 { .zoomStep(300%); }

bdalziel

@boundaryScale: 2;
.zoomStep(@zoomFactor) {
    @boundarySize: (@boundaryScale * @zoomFactor);
    .zoomBoundary {
        width: @boundarySize;
        height: @boundarySize;
        top:  (0 - (@boundarySize - 100%)/2);
        left: (0 - (@boundarySize - 100%)/2);
    }
    @imgPrimaryDimensionSize: ((100% + ((@boundarySize - 100%)/2)) / (@boundarySize/100));

bdalziel

    var performZoomAndPositionImg = function (newZoomLevel) {
        var zoomScaleContainer = Y.one('.fullScreenGallery .fullScreenExperience');
        var zoomBoundary = zoomScaleContainer.one('.zoomBoundary');
        var zoomImage = zoomBoundary.one('.zoomImg');

        var oldLeftOffset = zoomImage.get('offsetLeft');
        var oldTopOffset = zoomImage.get('offsetTop');

        var oldImgHeight = zoomImage.get('offsetHeight');
        var oldBoundaryHeight = zoomBoundary.get('offsetHeight');