atlas-anatomy-detail.html 9.22 KB

    <div class="container-fluid ">
        <!--Header-->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a class="frameLogo navbar-brand" href="welcome.html"><img src="img/logo-main.png" class="img-responsive" alt=""></a>
                </div>
             
            </div>
        </nav>
        <!--Body-->
        <div class="bodyWrap row">
            <div class="col-sm-12 pageHeading">
                <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
                <!--<div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-exchange"></i> </div>-->
                <h4 class="pull-left">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</h4>
                <div class="pull-right btn-group paddTop4 hidden-xs"> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-clone"></i></a> <a href="#" class="btn btn-xs btn-default"><i class="fa fa-close"></i></a> </div>
                <div class="clearfix"></div>
            </div>
            <div class="tools pull-left" style="top:44px;">
                <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
                <div class="">
                    <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm"> <img src="img/hide-pin.png" alt="" title=""></button> </div>
                    <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="img/draw-pin.png" alt="" title=""></button></div>
                    <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="img/all-pin.png" alt="" title=""></button></div>
                    <div class="col-sm-6" title="Select System">
                        <button class="btn btn-black btn-sm pull-right marginTop5 dropdown-toggle" type="button" id="dropdownMenu221" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><img src="img/icon-highlight.png" alt="" title=""></button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
                            <li><a href="#" title="Current Structure">All</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#" title="Cardiovascular">Cardiovascular</a></li>
                            <li><a href="#" title="Digestive">Digestive</a></li>
                            <li class="disabled"><a href="#" title="Endocrine">Endocrine</a></li>
                            <li class="disabled"><a href="#" title="Immune">Immune</a></li>
                            <li class="disabled"><a href="#" title="Integumentary">Integumentary</a></li>
                            <li class="disabled"><a href="#" title="Lymphatic">Lymphatic</a></li>
                            <li><a href="#" title="Muscular">Muscular</a></li>
                            <li class="disabled"><a href="#" title="Nervous">Nervous</a></li>
                            <li class="disabled"><a href="#" title="Reproductive">Reproductive</a></li>
                            <li class="disabled"><a href="#" title="Respiratory">Respiratory</a></li>
                            <li><a href="#" title="Skeletal">Skeletal</a></li>
                            <li class="disabled"><a href="#" title="Urinary">Urinary</a></li>
                        </ul>

                    </div>
                    <div class="col-sm-12" data-toggle="tooltip" data-placement="top" title="Show/Hide Structure Name Boxes"><button class="btn btn-black btn-sm marginTop5 btn-block"> <img src="img/comment-box.png" alt="" title=""></button> </div>
                </div>
                <div class="pips-slider" style="margin-top:125px">
                    <h3>Zoom <i class="fa fa-search-plus"></i></h3>
                    <div class="slider" id="vertical-slider"></div>
                </div>
            </div>

            <div class="main2">
                <div class="col-sm-12 stickey-area">
                    <div class="breadcrumb">
                        <div class="">
                            <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
                                <input class="form-control input-sm " type="text" placeholder="Anterior cutaneous branch of first intercostal nerve">
                                <!--<select class="form-control input-sm ">
                                  <option>---Select---</option>
                                  <option selected>Anterior cutaneous branch of first intercostal nerve</option>
                                  <option>Anterior cutaneous branch of second intercostal nerve</option>
                                  <option>Anterior cutaneous branch of third intercostal nerve</option>
                                  <option>Anterior intercostal artery</option>
                                  <option>Anterior intercostal vein</option>
                                </select>-->
                                <!--<div class="input-group-addon btn btn-primary btn-sm"></div>-->
                            </div>
                            &nbsp;
                            <!-- Single button -->
                            <div class="btn-group">
                                <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-arrow-circle-right"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">1<sup>st</sup> &amp; 2<sup>nd</sup> Intercostal Spaces</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">All</a></li>
                                </ul>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-male"></i>
                                </button>
                                <ul class="dropdown-menu" style="min-width:auto;">
                                    <li><img src="img/position.jpg" class="img-responsive"></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-12 img-thumbnail" align="center"><img src="img/1000x600.jpg" alt="" title="" class="img-responsive"></div>
                            <!--<div class="col-sm-1 img-thumbnail pull-right" align="center"><img src="img/500x300.jpg" alt="" title="" class="img-responsive"></div>
                            <div class="clearfix"></div>-->
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>



            </div>
        </div>
    </div>


    
    <script>
        $(window).load(function () {
            $(".stickey-area").sticky();
        });
    </script>
    <script>
        $(function () {
            $("#slider-range-min-2").slider({
                range: "min",
                min: 1,
                max: 60,
                value: 10,
                slide: function (event, ui) {
                    $("#amount-2").val(ui.value);
                }
            });
            $("#amount-2").val($("#slider-vertical-2").slider("value"));

        });
    </script>

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
    <script src="js/jquery-ui-slider-pips.js"></script>
    <script>
        $(".slider")

        .slider({
            min: 25,
            max: 100,
            value: 100,
            range: "min",
            orientation: "vertical"
        })

        .slider("pips", {
            rest: "label",
            step: "15"
        });
    </script>

    <script>
        $(function () {
            $("#draggable").draggable();
        });
    </script>