Can simply not get Backstretch to work! Giving 404 error when trying to load

Question

I am working on a little webpage in my spare time, where I am using python/django with bootstrap. I don't really have much experience with frontend, so are trying to do things very simple. Today I saw the backstretch plugin and thought it sounded pretty cool and easy to set up. But now I have been dealing with it for several hours, and still no pictures are shown.

Here is my code:

<html>
<head>
    <title>{% block title %}My webpage{% endblock %}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style type="text/css">
       body { background: transparent !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
    </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
    <h1>My Horse Farm</h1>
</div>
<div class="col-sm-4">
    {% if user %}
        Du er logget ind som: {{user.username}} - <b>Log ud</b>
    {% endif %}
</div>
</div>
<div class="row">
<div class="btn-group btn-group-justified" role="group"  style="width: 50%; margin: 0 auto;" aria-label="...">
    <a class="btn btn-default" href={% url 'frontpage' %} role="button">Frontpage</a>
    <a class="btn btn-default" href={% url 'account:profile' %} role="button">My profile</a>
    <a class="btn btn-default" href={% url 'marketplace:marketplace' %} role="button">Marketplace</a>
</div>
</div>
<div class="row">
    {% block content %}{% endblock %}
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script type="text/javascript" src="/jquery.backstretch.min.js"></script>
</body>
</html>


<script>
$(document).ready(function() {
    $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
});
</script>

For the line when trying to load backstretch, I get the following error: "Failed to load resource: the server responded with a status of 404 (NOT FOUND)".

Have been trying to load the scripts in different orders - but nothing helps. What am I doing wrong?

You're loading it with `/jquery.backstretch.min.js`, so that file would have to be at the root of your site. You can try using a CDN for it too: https://cdnjs.com/#q=backstretch — Paulo Almeida, Apr 04 '16 at 14:55

score 0 · Answer 1 · answered Apr 04 '16 at 15:11

0

Use this:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

instead of this:

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>

answered Apr 04 '16 at 15:11

Ralph King

994
1
9
19

score 0 · Answer 2 · answered Apr 04 '16 at 15:14

You're trying to reference a static file via a file path which is not linking correctly to your static folder location. Whilst something like src="/static/jquery.backstretch.min.js" may fix your problem (where static is the directory you define in your settings.py). You'd be better using the django static template tag

{% load staticfiles %}

<script type="text/javascript" src="{% static 'jquery.backstretch.min.js' %}"></script>

You can read more about deploying static files in the django docs

Can simply not get Backstretch to work! Giving 404 error when trying to load

2 Answers2