Question

我正在研究Django项目，并试图使用jQuery Colorbox来显示一些内容。

我是一名经验丰富的Python开发人员，但尚未体验过JavaScript。

我从主Colorbox网页复制了示例代码，发现它主要在我的Django页面中运行。但是，当我点击我的图库项目时，有时灯箱对于图像来说太窄了。

奇怪的是，我无法发现任何关于灯箱何时太窄以及尺寸正确的图案。我是否点击列表中的图像，或点击灯箱内部的前进或后退箭头似乎无关紧要。

这是我的Django模板。我已将jQuery源文件colorbox.css和colorbox image目录放入我的static目录中，以便Django迷你服务器为其提供服务。

<!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>

编辑：我开始认为它可能与缩略图链接后的文本链接有关。我肯定没有正确地执行该部分，因为颜色框显示的图像数量是正确数字的两倍，因此它必须计算具有class="gallery"属性的所有内容。我需要编写更好的HTML来使缩略图和文本成为一个“按钮”，这样颜色框只能计算一次。

编辑：我已经更改了我的代码，现在它的工作几乎完美。这个盒子比我想要的更频繁地调整大小，但至少它总是以正确的大小结束。

我做了两件事：一，我修复了我的愚蠢链接代码和两个，我设置了width和height。我有两个链接，一个图像和一个文本;这很愚蠢，我只是将img标记和链接文本放在一个<a>标记中。我设置width和height所以现在这是我的颜色框声明：

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

因此，有时不是正确的尺寸，有时太瘦，现在盒子总是增长到95％，但随后调整到适合自己的尺寸。我希望它能够顺利地达到完美的尺寸，但是当我删除width和height属性时，它会回到有时工作的状态，有时不会。

编辑：不，上述情况不太正确。它是垂直的完美尺寸，但比水平方向更宽。但我现在有一个满意的答案，我在下面的答案中对此进行了描述。

Answer 1

我工作得很好。

正如我测试的那样，我意识到高度始终是正确的，我的问题是宽度。

我在模板中的id=标记中添加了img，然后使用该id值来检查图像的宽度。然后我将该宽度传递给colorbox.resize()方法函数调用。

我发现我的对话太瘦，无法显示8＆＃34;一些小图片的文字，所以我添加了最小宽度。

最后，我将快速而又脏的HTML切换为使用带有基页的Django模板系统。

把它们放在一起，这是我的工作答案：

{% 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 %}

colorbox窗口没有正确调整大小

1 个答案: