.

anatomy/static/js/anatomy.js

@@ -215,6 +215,7 @@ function loadDicomViewer(images_to_load, annotations_to_load) {
     }
   }
 }
+window.loadDicomViewer = loadDicomViewer
 
 function prepAnswerData() {
   //$("#id_correct").val($("li.correct").map(function() {

atlas/models.py

@@ -445,10 +445,17 @@ class Series(models.Model):
 
         return ",".join(images)
 
-    def get_image_url_array(self, findings=False):
+    def get_image_url_array_not_json(self):
+        return self.get_image_url_array(json_output=False)
+
+    def get_image_url_array(self, findings=False, json_output=True):
         images = [f"{REMOTE_URL}{i.image.url}" for i in self.images.all()]
 
-        return json.dumps(images)
+        if json_output:
+            return json.dumps(images)
+        else:
+            # This is a mess...
+            return format_html('", "'.join(images))
 
     def get_thumbnail(self):
         images = self.images.all()

atlas/templates/atlas/collection_case_view.html

@@ -19,14 +19,12 @@
         {% endfor %}
     </div>
 
-        {% for series in series_list %}
 <div>
 <div id="single-dicom-viewer" class="dicom-viewer" data-images="{{ series.get_image_url_array }}" data-annotations=''>
 </div>
 
 </div>
 
-        {% endfor %}
 <div>
 {% if previous %}
     <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=case_number|add:-1 %}">Previous</a>
@@ -38,3 +36,17 @@
 <br/>
 Return to <a href='{{collection.get_absolute_url}}'>collection</a>
 {% endblock %}
+{% block js %}
+<script type="text/javascript">
+    window.images = {
+        {% for series in series_list %}
+            {{forloop.counter0}} : ["{{ series.get_image_url_array_not_json }}"],
+        {% endfor %}
+    }
+
+    $(document).ready(function () {
+    loadDicomViewer(window.images[0])
+    })
+</script>
+
+{% endblock js %}