Django 프로젝트에서 일하고 있으며 jQuery Colorbox를 사용하여 일부 내용을 표시하려고합니다.colorbox 창이 정확하게 크기가 조정되지 않습니다.
저는 경험 많은 파이썬 개발자이지만 아직 JavaScript에 익숙하지 않았습니다.
주 Colorbox 웹 페이지의 예제 코드를 복사하여 장고 페이지에서 대부분 작동한다는 것을 알았습니다. 그러나 갤러리 항목을 클릭하면 라이트 박스가 너무 좁아서 이미지가 표시되지 않는 경우가 있습니다.
라이트 박스가 너무 좁고 크기가 올바르지 않은 경우 이상한 부분이 있습니다. 내 목록에서 이미지를 클릭하거나 라이트 박스 내부에서 앞으로 또는 뒤로 화살표를 클릭해도 상관 없습니다.
여기 내 장고 템플릿입니다. Django 미니 서버가 서비스를 제공 할 수 있도록 jQuery 소스 파일 colorbox.css과 컬러 박스 image을 내 static 디렉토리에 넣었습니다.
<!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 : 미리보기 링크 뒤의 텍스트 링크와 관련이 있다고 생각하기 시작했습니다. colorbox가 정확한 숫자의 두 배인 이미지의 수를 표시하기 때문에 정확하게 그 부분을 수행하지 않습니다. 따라서 class="gallery" 속성을 가진 모든 것을 세고 있어야합니다. 축소판과 텍스트를 하나의 "버튼"으로 만들기 위해 더 나은 HTML을 작성하여 colorbox가 한 번만 계산하도록해야합니다.
편집 : 코드를 변경했는데 이제 거의 완벽하게 작동합니다. 상자는 내가 선호하는 것보다 더 자주 크기가 조정되지만 적어도 항상 올바른 크기로 끝납니다.
두 가지를했습니다. 하나는 바보 링크 코드를 수정했고 두 개는 width과 height으로 설정했습니다. 나는 두 개의 링크, 하나의 이미지와 하나의 텍스트를 가졌다. 그건 바보 같아요, 난 그냥 태그 안에 img 태그와 링크 텍스트를 넣어. 내가 width 설정하고 height 그래서이 지금 내 colorbox 선언입니다 : 때때로 정확한 크기 인 때로는 너무 마른 체형가되는 그래서 그 대신
<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 속성을 제거하면 때때로 작동하지 않는 경우가 있습니다.
편집 : 아니요, 위의 내용이 정확하지 않습니다. 그것은 수직으로 그러나 수평보다 필요한 것보다 더 넓은 완벽한 크기였다. 그러나 나는 만족스러운 대답을 지금 가지고 있으며, 나는 그 대답을 아래에서 설명한다.