Overlay tour

by DIdac Montero

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container" id="playerNavi">
    <div class="row">
        <div class="parent">
            <img class="img-responsive" src="http://cdn.homesthetics.net/wp-content/uploads/2013/10/17-Inspiring-Wonderful-Black-and-White-Contemporary-Interior-Designs-Homesthetics-151.jpg"></img>
            <div id="container">
                <header>
                    <aside>
                        <img class="img-responsive" src="http://clipnow.com/panorama/logo70.png" />
                    </aside>
                    <div class="nav" style="background-color: #0089cc;"></div>
                </header>
                <div id='main'>
                    <article></article>
                    <!-- LEFT NAVIGATION -->
                    <div class="nav hidden-xs">
                        <div class="playerNaviMenu">
                            <div class="img-responsive logoHomeBlock" style="background-color: #06a479;"></div>
                            <div class="arrow top"><i class="fa fa-chevron-up fa-lg"></i>

                            </div>
                            <ul style="margin-right: -15px; margin-left: 0px;">
                                <li id="navi-item-R0010014-_-JPG" class="navigationItem active"> <a href='javascript:loadSceneIfAccessible("R0010014-_-JPG")'> <img class="img-responsive circular" src="//live2.clipnow.com/static_files/items/ralf/5513c8f77c847db32558129a/Tour/thumb-images/R0010014.JPG" />
                <h4>room</h4></a>

                                </li>
                                <li id="navi-item-R0010015-_-JPG" class="navigationItem "> <a href='javascript:loadSceneIfAccessible("R0010015-_-JPG")'> <img class="img-responsive circular" src="//live2.clipnow.com/static_files/items/ralf/5513c8f77c847db32558129a/Tour/thumb-images/R0010015.JPG" />
                <h4>kitchen</h4></a>

                               ...

CSS

@import url('//getbootstrap.com/dist/css/bootstrap.css');
 @import url(//fonts.googleapis.com/css?family=Droid+Sans);
 @media (max-width: 767px) {
     #playerNavi .legal :first-child {
         background: rgba(240, 240, 240, .6);
     }
 }
 @media (min-width: 768px) and (max-width: 991px) {
     #playerNavi ul li h4 {
         font-size: 12px;
     }
 }
 @media (min-width: 992px) and (max-width: 1199px) {
     #playerNavi ul li h4 {
         font-size: 13px;
     }
 }
 @media (min-width: 1200px) {
     #playerNavi ul li h4 {
         font-size: 14px;
     }
 }
#pannellumFrame {
    width: 100%;
}
 #playerNavi .parent {
     position:relative;
     overflow:hidden;
 }
 #container {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: column;
     flex-flow: column;
 }
 /* HEADER menu */
 #playerNavi header {
     pointer-events: none;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row;
     flex-flow: row;
 }
 /* customer logo */
 #playerNavi header > aside {
     -webkit-flex: 4 1 80%;
     flex: 4 1 80%;
     -webkit-order: 2;
     order: 2;
     position: relative;
 }
 #playerNavi header > aside > div {
     -webkit-flex: 1 1 50%;
     flex: 1 1 50%;
     position: relative;
 }
 #playerNavi header > aside > img {
     position:absolute;
     right: 0;
     max-width: 100%;
     height: 100%;
 }
 /* LEFT NAVIGATION Home logo */
 #playerNavi header > .nav {
     background:url(../images/panorama/home.png) no-repeat center center;
 }
 #playerNavi #main {
     margin: 0px;
     padding: 0px;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row;
     flex-flow: row;
     flex: 17 1 85%;
 }
 #playerNavi #main > article {
     /* background: #dddd88; */
     -webkit-flex: 2 1 41.65%;
     flex: 2 1 41.65%;
     -webkit-order: 2;
     order: 2;
 }
 #playerNavi #main > .nav {
     -webkit-order: 1;
     order: 1;
...

JavaScript

$("#playerNavi #main").delegate('.floorPlan > div', 'click', function () {
    var plan = $(this).attr("attr-plan");
    $("#playerNavi #main > aside .arrow > li").first().attr("attr-plan")
    $("#playerNavi #plan-" + plan).animate({
        right: "0%"
    }, 800, function(){$(this).addClass("active");});
        $("#playerNavi #main > aside .arrow").animate({
        right: "0%"
    }, 800);
    $(this).parent().css({"cursor": "default"});
});

$("#playerNavi #main").delegate('aside .arrow > i', 'click', function () {
        $("#playerNavi #main > aside > img.active").animate({
        right: "-100%"
    }, 800, function(){$(this).removeClass("active");});
        $("#playerNavi #main > aside .arrow").animate({
        right: "-100%"
    }, 800);
    $("#playerNavi #main .floorPlan > div").parent().css({"cursor": "w-resize"});
});