Django Admin and third party Javascript

I am running django 2.0, which has jquery 2.2.3. I want to utilize this ImageViewer Javascript app https://github.com/s-yadav/ImageViewer with one of my admin pages. I added the js files and css file to the Media class within my ModelAdmin class, and collected all the static files. The files are loaded on the web page. I am following the app's example for Image Mode (http://ignitersworld.com/lab/imageViewer.html)

The page loads, but there is an error in the js console:

    imageviewer.js:16 Uncaught TypeError: $ is not a function
    at imageviewer.js:16
    at imageviewer.js:789
(anonymous) @ imageviewer.js:16
(anonymous) @ imageviewer.js:789

The first few lines of the ImageViewer script - line 16 is the one with 'body'

    /*
    ImageViewer v 1.1.3
    Author: Sudhanshu Yadav
    Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: http://ignitersworld.com/lab/imageViewer.html
*/

/*** picture view plugin ****/
(function ($, window, document, undefined) {
    "use strict";

    //an empty function
    var noop = function () {};

    var $body = $('body'),
        $window = $(window),
        $document = $(document);

The last line of the script is line 789, the source of the second error:

    }((window.jQuery), window, document));

The header of my admin page:

<script type="text/javascript" src="/admin/jsi18n/"></script>
<link href="/static/imageviewer.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<script type="text/javascript" src="/static/imageviewer.js"></script>
<script type="text/javascript" src="/static/my_code.js"></script>

The html for my image in the admin page:

<div class="readonly"><div id="image-gallery-3" class="cf"><img src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c_thumb.jpg" data-high-res-src="/documents/bfa1a808-7412-46c0-9d68-1a1df98f5a9c.jpg" alt="" class="pannable-image"></div></div>

And the my_code.js to make this thing work, as shown in the example:

$(function () {
    $('.pannable-image').ImageViewer();
});

The only difference between the example page for ImageViewer and my code is that the my_code.js appears in the example page after the html for the image, and my_code.js appears before the html for the image. Does that make a difference?

I am not a js guy, and I have run into this same error before when trying to integrate a third party Javascript code with the django admin pages. I still don't have a solution to this problem, except not to try to use any custom js with the django admin pages!

I think there is some sort of interaction between the django jquery and third party js, which causes this error, but again, I am not a js guy! I have google the error and integrating third party js with the django admin, but have not found anything that works.

Thanks!

Mark