freezeframe in bootstrap nav-pills

by bairog

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/freezeframe/dist/freezeframe.min.js"></script>
<div>
    <ul class="nav nav-pills text-warning">
        <li class="nav-item">
            <a class="nav-link active" href="#tab-first" data-toggle="tab">First Tab</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#tab-second" data-toggle="tab">SecondTab</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab-first">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/55f96e21e4b0f86680e762dc/56aa551b8b38d446e39e933b/1454003533097/.gif" />

                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
        <div class="tab-pane" id="tab-second">
            <div style="overflow: auto;  max-height: 650px;">
                <img class="freezeframeWithOverlay" src="http://static1.squarespace.com/static/51c748abe4b0c275d0aa86bf/56141631e4b0095d43132f02/5614164be4b0652b31fbd0a5/1444744817955/parislove9801.gif" />
                <script>
                    new Freezeframe('.freezeframeWithOverlay', {
                        overlay: true
                    });
                </script>
            </div>
        </div>
    </div>
</div>