I've created a page in Django which serves images of a specific car into a gallery slider like this.
It seems that the View doesn't even recognize the fotorama gallery. The <div class="fotorama"></div> shows up in the inspect console, but the images are still spread out in html's default layout.
I'm hosting the fotorama.js and .css locally since they didn't work when served via CDN.
<head>
...
{% load static %}
<link href="{% static 'css/fotorama.css' %}" rel="stylesheet">
<script src="{% static 'js/fotorama.js' %}"></script>
</head>
...
(jQuery comes with bootstrap and I know that it's working. And I've run collectstatic, so that's not the problem)
<div class="container">
<div class="row">
<div class="col justify-content-center">
<div class="fotorama">
<img src="/static/images/placeholder.jpg">
{% for image in car.image_set.all %}
<img src="{{ image.image.url }}">
{% endfor %}
</div>
</div>
</div>
</div>
Just as a quick test, I served a normal image outside of all the other container, row, and col divs. It also didn't make a difference.
<div class="fotorama">
<img src="/static/images/placeholder.jpg">
</div>
This is what the page looks like:
I made a quick page outside my django project, and fotorama works perfectly. Could this be a django-specific issue? Is there an extra plugin/extra code I need to make the slider work?
Update
I added some js code to try and manually initialize the fotorama code from the API.
<script>
$(function () {
// 1. Initialize fotorama manually.
var $fotoramaDiv = $('#fotorama').fotorama();
// 2. Get the API object.
var fotorama = $fotoramaDiv.data('fotorama');
// 3. Inspect it in console.
console.log(fotorama);
});
</script>
While it doesn't make a difference(the images still aren't being added to a slider) there's this console error:
(index) : 82 Uncaught ReferenceError: $ is not defined
at (index) : 82
(anonymous) @ (index) : 82
(Line 82 is where the script code begins, and colon spacing added for formatting)
There weren't any errors being printed to the console before I added the js scripts, could this mean that fotorama and other js scripts aren't even being recognized?
Update 2
I've been reading previous Stack questions about this topic, and I've taken some steps to get more errors printed into the console, because visible errors are better than silence.
I moved the href from the head to the bottom of the body, and this error popped up.
GET http://localhost:8000/static/js/fotorama.js net::ERR_ABORTED 404 (Not Found)
... which is the correct path to the file.
So I moved it back to the original CDN link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
Which gets clears up the error.
A Somewhat success I found a script to check if the jQuery had loaded.
<script>
if(typeof jQuery!=='undefined'){
console.log('jQuery Loaded');
}
else{
console.log('not loaded yet');
}
</script>
Which the console returns 'not loaded yet', even though it's posted at the bottom of the HTML page.
However, while the images are still stacked, they now respond to clicks and drags as a slider would, and the text below them (description paragraphs), now cover all bu the first one. Which is still progress.