JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://www.x1developments.com/wp-content/themes/x1dev/scroll/jquery.easing.min.js"></script>
<script src="http://www.x1developments.com/wp-content/themes/x1dev/scroll/jquery.scrollstop.js"></script>
<script src="http://www.x1developments.com/wp-content/themes/x1dev/scroll/jquery.scrollsnap.js"></script>
<div class="single-letting-lightbox-wrap">
    <div class="inner">
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/Phase-One-View-02_zoom.jpg" />
        </div>
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/Reception-Lobby_zoom1.jpg" />
        </div>
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/Student_Room_Day_Opt02_zoom1.jpg" />
        </div>
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/Student_Room_Dusk_zoom1.jpg" />
        </div>
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/L1-Phase-one-Eye-Level_zoom.jpg" />
        </div>
        <div class="fullscreen-image-wrap">
            <img class="fullscreen-image" src="http://www.x1developments.com/wp-content/uploads/2014/10/Aerial-Dusk_zoom.jpg" />
        </div>
    </div>
    <div class="lightbox-left-arrow"></div>
    <div class="lightbox-right-arrow"></div>
</div>

CSS

.single-letting-lightbox-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 11111;
}
.single-letting-lightbox-wrap .inner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: scroll;
    white-space: nowrap;
    font-size: 0;
    -webkit-overflow-scrolling: touch;
}
.single-letting-lightbox-wrap .fullscreen-image-wrap {
    display: inline-block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    text-align: center;
    overflow-x: hidden !important;
}
.single-letting-lightbox-wrap .fullscreen-image {
    display: inline-block;
    height: 100%;
    width: auto !important;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.single-letting-lightbox-wrap .lightbox-main-logo {
    position: fixed;
    width: 65px;
    height: 65px;
    top: 30px;
    left: 30px;
    background: url('http://www.x1developments.com/wp-content/uploads/2014/10/lightbox-close-thin.png') no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}
.single-letting-lightbox-wrap .lightbox-left-arrow {
    position: fixed;
    width: 42px;
    height: 80px;
    bottom: 30px;
    left: 30px;
    background: url('http://www.x1developments.com/wp-content/uploads/2014/12/lightbox-left.png') no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
}
.single-letting-lightbox-wrap .lightbox-right-arrow {
    position: fixed;
    width: 42px;
    height: 80px;
    bottom: 30px;
    right: 30px;
    background: url('http://www.x1developments.com/wp-content/uploads/2014/11/lightbox-right.png') no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:...

JavaScript

//Lightbox Fullscreen Images Height

	$(document).ready(function () {

	    var winhei = $(window).height(),
	        winwid = $(window).width();
	    $('.fullscreen-image').css({
	        'height': winhei
	    });


	    $(".lightbox-right-arrow").click(function () {
	        $('.single-letting-lightbox-wrap .inner').animate({
	            scrollLeft: "+=" + winwid
	        }, 800);
	        return false;
	    });

	    $(".lightbox-left-arrow").click(function () {
	        $('.single-letting-lightbox-wrap .inner').animate({
	            scrollLeft: "-=" + winwid
	        }, 800);
	        return false;
	    });


        $('.single-letting-lightbox-wrap .inner').scrollsnap({
            direction: 'x',
            snaps: '.fullscreen-image-wrap',
            latency: 100,
            proximity: winwid
        });

	});