colorbox window not resizing correctly

StackOverflow https://stackoverflow.com/questions/22923263

  •  29-06-2023
  •  | 
  •  

Question

I'm working on a Django project, and trying to use jQuery Colorbox to display some content.

I'm an experienced Python developer but not experienced with JavaScript yet.

I copied the example code from the main Colorbox web page, and found that it mostly works in my Django page. However, when I click through my gallery items, sometimes the lightbox is too narrow for the image.

The weird part is that I can't spot any pattern as to when the lightbox is too narrow and when it is correctly sized. It doesn't seem to matter whether I click on the image in my list, or click a forward or back arrow from inside the lightbox itself.

Here is my Django template. I have placed the jQuery source files, colorbox.css, and the colorbox image directory into my static directory so that the Django mini-server will serve it up.

<!DOCTYPE html>
<html>
    <head>
        <title>My gallery app</title>


        {% load static %}
        <link rel="stylesheet" href="{% get_static_prefix %}colorbox.css">
        <script src="{% get_static_prefix %}jquery.min.js"></script>
        <script src="{% get_static_prefix %}jquery.colorbox-min.js"></script>
        <script>
            jQuery(document).ready(function () {
                $('a.gallery').colorbox({
                    initialHeight:"95%",
                    initialWidth:"95%",
                    opacity:1.0,
                    rel:'group1'
                });
            });
        </script>
    </head>

    <body>

<div id="header" style="background-color:#33ccff;" width=100%>
<h1 style="margin-bottom:0;"><a href="/">Back to home page</a></h1></div>


        <h1>My gallery app</h1>

    {% if lst_items %}
        <section>
        {% for item in lst_items %}

            <div>
                <a href="/items/{{item.id}}" class="gallery">
                    <img
                        border="0"
                        alt="/items/{{item.id}}"
                        {% if item.icon %}
                            src="{{MEDIA_URL}}{{item.icon}}" />
                        {% else %}
                            {% load static %}
                            src="{% get_static_prefix %}no_photo_available.150x150.png" />
                        {% endif %}
                </a>
            <a href="/items/{{item.id}}" class="gallery">{{ item.name }}</a>
            </div>
        {% endfor %}
        </section>
    {% else %}
        <p>Cannot access DB!</p>
    {% endif %}
    <div style="clear: both">
    <br>
    <footer>
    <p>
    <a href="/items/add/">Add a new item</a>
    </p>
    <p>
    <a href="/">Back to the home page</a>
    </p></div>
    </footer>

    </body>
</html>

EDIT: I am starting to think that it may have something to do with my text link that comes after the thumbnail link. I'm definitely not doing that part correctly because the colorbox displays a count of images that is double the correct number, so it must be counting everything that has the class="gallery" attribute. I need to write better HTML to make the thumbnail and the text into one "button" so that colorbox only counts it one time.

EDIT: I have changed my code and now it is working almost perfectly. The box is resizing more often than I would prefer but at least it always ends up the correct size.

I did two things: one, I fixed my silly link code and two, I set width and height. I had two links, one image and one text; that's silly, I just put both the img tag and the link text inside a single <a> tag. I set width and height so this is my colorbox declaration now:

    <script>
        jQuery(document).ready(function () {
            $('a.gallery').colorbox({
                onComplete : function() { 
                    $(this).colorbox.resize(); 
                },
                height:"95%",
                width:"95%",
                opacity:0.5,
                rel:'group1'
            });
        });
    </script>

So instead of sometimes being the correct size and sometimes being too skinny, now the box always grows to 95% size but then resizes itself down to perfect size. I would prefer it just smoothly go to the perfect size, but when I remove the width and height properties, it goes back to sometimes working and sometimes not.

EDIT: No, the above wasn't quite correct. It was the perfect size vertically but wider than necessary horizontally. But I have a satisfactory answer now, and I describe it below in an answer.

Was it helpful?

Solution

I have it working well.

As I tested, I realized that the height was always correct, and my problem was the width.

I added an id= to the img tag in my template, and then used that id value to check the width of the image. Then I passed that width to the colorbox.resize() method function call.

I found that my dialog was too skinny to show the "1 of 8" text for some small images, so I added a minimum width.

Finally, I switched my quick-and-dirty HTML to using the Django templating system with a base page.

Put it all together and this is my working answer:

{% extends 'base.html' %}
{% block title %}My gallery app{% endblock %}
{% block extra_header %}
    {% load static %}
    <link rel="stylesheet" href="{% get_static_prefix %}colorbox.css">
    <script src="{% get_static_prefix %}jquery.min.js"></script>
    <script src="{% get_static_prefix %}jquery.colorbox-min.js"></script>
    <script>
        jQuery(document).ready(function () {
            $('a.gallery').colorbox({
                onComplete : function() { 
                    var x = Math.max($("#item_photo").width(), 180);
                    $(this).colorbox.resize({innerWidth:x}); 
                },
                opacity:0.4,
                rel:'group1'
            });
        });
    </script>
{% endblock %}
{% block content %}
    <p>
    <a href="/items/add/">Add a new item to gallery</a>
    </p>
    {% if lst_item %}
        <section>
        {% for item in lst_item %}

            <div>
                <a href="/items/{{item.id}}" class="gallery">
                    <img
                        border="0"
                        alt="/items/{{item.id}}"
                        {% if item.icon %}
                        src="{{MEDIA_URL}}{{item.icon}}" />
                        {% else %}
                        {% load static %}
                        src="{% get_static_prefix %}no_photo_available.150x150.png" />
                        {% endif %}
                {{ item.name }}
                </a>
            </div>
        {% endfor %}
        </section>
    {% else %}
        <p>Cannot access database!</p>
    {% endif %}
{% endblock %}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top