class.html.twig

{% extends 'layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://api.joomla.org/css/jquery.iviewer.css" media="all" />
{% endblock %}

{% block content %}
    <div class="row-fluid">
        <main class="span12">
            <div class="well wrapper">
                <div id="viewer" class="viewer"></div>
            </div>
        </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://api.joomla.org/js/jquery.iviewer.min.js"></script>
    <script type="text/javascript">
        $(window).resize(function () {
            $("#viewer").height($(window).height() - 260);
        });

        $(document).ready(function () {
            $("#viewer").iviewer({src: "{{ path('classes.svg') }}", zoom_animation: false});
            $('#viewer img').bind('dragstart', function (event) {
                event.preventDefault();
            });
        });
    </script>
{% endblock %}