I cannot make Lightbox2 (http://lokeshdhakar.com/projects/lightbox2/) work with Django. When I click on member's picture I would like to see the lightbox appear. Instead it displays the downloaded image. Also hover does not work on the image. Here is what I've done so far:
I have downloaded Lightbox2 and copied files in js, img and css folders.
base.html
<head>
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</head>
<body>
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
<link rel="stylesheet" href="{% static 'css/ligthbox.css' %}" >
</body>
member_details.html (Django template)
<div class="members">
{% if userprofile.profile_picture %}
<a href="{{ MEDIA_URL }}
{{userprofile.profile_picture.url|default_if_none:'' }}" lightbox="{{userprofile.user.first_name }}" >
<img class="lightbox" src="{{ MEDIA_URL }}{{ userprofile.profile_picture.url|default_if_none:"" }}" alt="{{ userprofile.user.first_name }}" />
</a>
{% endif %}
</div>
Can someone please suggest how to fix this please.
Whilst you have added some example code there is not enough information in your question to give an accurate answer. There are a number of problems with the code blocks you have included in your question also:
Your example code has numerous spelling mistakes which means your CSS will give you 404.
There is no javascript included
The data attributes on your image <img> and link <a> tags are not named correctly.
Look through the how to use guide not using dynamic data (use a static image) get it working then replace the images with server side template generated content.
HOW TO USE
Step 1 - Load the Javascript and CSS
Download and unzip the latest version of Lightbox.
Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first.
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
Look inside the css folder to find lightbox.css and load it.
<link href="css/lightbox.css" rel="stylesheet" />
Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.
Step 2 - Turn it on
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">
Image #1
</a>
Optional: Add a data-title attribute if you want to show a caption.
If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
Image #2
Image #3
Image #4
Thanks #MattWritesCode and #cbergmiller.
Following #MattWritesCode advice I now have in my template:
<div class="row">
<div class="col-md-4 col-xs-6">
<a href="{% static 'img/8marc.jpg' %}" data-lightbox="8marc" data-title="My caption">
<img src="{% static 'img/8marc.jpg' %}" /></a>
</a>
</div>
</div>
base.html
<head>
<title>TrackCat - {% block title %}TrackCat{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,300">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/lightbox.css' %}" >
{% block custom_css %}{% endblock %}
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static 'js/jquery.datetimepicker.js' %}"></script>
<script type="text/javascript" src="{% static 'js/lightbox.min.js' %}"></script>
I managed to activate lightbox functionality using
<script type="text/javascript" src="{% static 'js/lightbox.js' %}"></script>
instead of lightbox.min.js in my base.html.
Related
Im trying to upload templates from HTLM5 UP into the Django framework. However I'm not sure where to place some of the supporting CSS, SASS, Webfonts, Javascript files. Link to the template I downloaded below. Files I'm referring to are in the "Assets" folder.
https://html5up.net/strata
I've tried placing them in the path below. I'm using the Pycharm IDE if that changes anything.
ProjectName/mysite/templates/mysite/assets
I've been trying to call them with href="mysite/assets/css/main.css" with no success.
IDE: PyCharm
At first, you need to {% load staticfiles %} top of the .html file
And link your file like :
CSS = <link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
img= <img src="{% static 'images/rakib.jpg' %}" alt="" />
Js= <script src="{% static 'assets/js/jquery.min.js' %}"></script>
Full code:
Filename: base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title> {% block head_title %} Blog {% endblock head_title %} </title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href=href="{% static 'assets/css/main.css' %}" />
<style>
{% block style %} {% endblock style %}
</style>
{% block head_extra %} {% endblock head_extra %}
</head>
Well my template code.
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{% static 'website/staffaddproblem.js' %}"></script>
<title>Dashboard</title>
<link href="{% static 'website/style.css' %}" rel="stylesheet" type="text/css"/>
</head>
<body>
body
</body>
<html>
As you can see it has a css file. which is working properly, but java script file does not work.
when i load the page its source looks like this.
When i click the link it loads the file too its there its linking fine but its not working . there is no problem in code js code working fine when written in same file.
Have you changed the settings.py file to include staticroot?
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here's a part of my template which works with both js and css files.
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/css" rel="stylesheet" href="{% static 'css/stylesheet.css' %}">
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<title>
The directories are as follows:
- static
-js
- jquery-1.11.3.min.js
-css
- stylesheet.css
- materialize.min.css
- templates
-index.html
Below is the Template code that I am using. I am using foundation as a framework and right now I'm just trying to pull up a range slider. Using the same Static type links, the css works fine, its just the javascript that doesnt seem to work for me. When I trace the file in view source and click on the link of the file, it takes me to the file's code. Wi that, why wouldnt the js code be working?
<!DOCTYPE html>
{% load staticfiles %}
<link href="{% static "styling/css/normalize.css" %}" rel="stylesheet">
<link href="{% static "styling/css/foundation.min.css" %}" rel="stylesheet">
<link href="{% static "styling/css/custom.css" %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="row">
<div class="small-10 medium-11 columns">
<div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
<script src="{% static "styling/js/jquery.js" %}"></script>
<script src="{% static "styling/js/foundation.min.js" %}"></script>
<script>
$(document).foundation();
</script>
</body>
Seems like your missing the > sign at the end of the foundation script tag:
<script src="{% static "styling/js/foundation.min.js" %}"></script
Should've been:
<script src="{% static "styling/js/foundation.min.js" %}"></script>
You should check the resulting html via W3C Validator (or some other validator), this usually helps.
I'm having a lot of trouble getting all my static files to serve up. In my settings.py, I have:
STATIC_URL = '/static/'
I'm using Django 1.6, and according to the official documentation https://docs.djangoproject.com/en/dev/howto/static-files/
Since I have debug=True, this should suffice.
Then in my templates:
<link type="text/javascript" href="{% static 'jquery-1.11.1.js' %}" />
<link type="text/javascript" href="{% static 'jquery-1.11.1.min.js' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'jumbotron.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'custom.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'simple-sidebar.css' %}" />
All the CSS works fine. When I load my page, looking in Chrome's developer tools, they're coming from /static, and I have all these files stored in the same dir. But the .js files are not loading at all. They work fine if I link to the CDN.
As I said in the comments, with <script> tags, they shouldn't be self-closing so
<script type="text/javascript" src="{% static 'jquery-1.11.1.min.js' %}"></script>
note the <script ...></script> instead of <script .../>
This is probably why your subsequent link tags aren't being processed properly
What is link in
<link type="text/javascript" href="{% static 'jquery-1.11.1.min.js' %}" />
It should be
<script type="text/javascript" src="{% static 'jquery-1.11.1.min.js' %}"></script>
I'm having a spot of trouble with bootstrap. I started having problems with the links in the nav component not being clickable. The links were fine when typed into the browser, but not when clicked.
I rearranged the order of the script tags at the bottom of the body so the link to jQuery in my Django static directory came first and the links became 'clickable', although it broke other functionality like a menu drop-down and an accordion, which no longer opens.
I've tried moving the script tags into the section, switching them back; tried the development version of jQuery.... nothing seems to work.
What's going on? How can I get both the links active and the javascript functionality to work.
<head>
{% block head %}
# ...
# ...
{% load static %}
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="{% static 'css/bootstrap-responsive.css' %}" rel="stylesheet">
{% endblock head %}
</head>
<body id="body">
{% block body %}
#.....
#.....
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/jquery-1.8.2.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endblock body %}
</body>
After much searching and chin strokng, I realised that in the template I was calling from my view, I had the following:
{% for group in class_groups %}
<li><a data-toggle=**"tab"** href="{% url 'subnav' sub_slug=subj class_grp_slug=group.group_name %}">{{ group.group_name }}</a>
{% endfor %}
when it should actually have been:
{% for group in class_groups %}
<li><a data-toggle=**"tabs"** href="{% url 'subnav' sub_slug=subj class_grp_slug=group.group_name %}">{{ group.group_name }}</a>
{% endfor %}
Both the dropdown and the nav-tab are working now.