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