CODEWITHSUNDEEP
javascriptdjangolightbox2
Ana Sustic
Ana Sustic

Reputation: 445

Cannot make Lightbox2 work in Django

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.

Upvotes: 0

Views: 1198

Answers (2)

Ana Sustic
Ana Sustic

Reputation: 445

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.

Upvotes: 0

Matt Seymour
Matt Seymour

Reputation: 9395

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:

  1. Your example code has numerous spelling mistakes which means your CSS will give you 404.
  2. There is no javascript included
  3. 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:

<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Upvotes: 2

Related Questions