colorbox窗口沒有正確調整大小

我正在研究一個Django項目，並嘗試使用jQuery Colorbox來顯示一些內容。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>

編輯：我開始認爲它可能與縮略圖鏈接後出現的文本鏈接有關。我絕對沒有正確地做這個部分，因爲colorbox顯示的圖像數是正確數字的兩倍，所以它必須計算具有class="gallery"屬性的所有東西。我需要編寫更好的HTML來將縮略圖和文本合併成一個「按鈕」，以便colorbox只計算一次。

編輯：我改變了我的代碼，現在它幾乎完美的工作。箱子比我想要的更經常調整大小，但至少它總是以正確的大小結束。

我做了兩件事：一，我固定了我愚蠢的鏈接代碼和兩個，我設置了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屬性，它可以回到有時工作，有時不會。

編輯：不，上述不完全正確。這是完美的垂直尺寸，但比水平寬度要寬。但我現在有一個滿意的答案，我在下面的答案中加以描述。

來源

2014-04-07 steveha

我讓它工作得很好。

正如我測試，我意識到高度總是正確的，我的問題是寬度。

我在我的模板中添加了一個id=到img標記，然後使用該值id檢查圖像的寬度。然後，我將該寬度傳遞給colorbox.resize()方法函數調用。

我發現我的對話框太瘦，無法顯示一些小圖像的「1」，因此我添加了最小寬度。

最後，我把我的快速和骯髒的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 %}

來源

2014-04-08 04:11:48 steveha

colorbox窗口沒有正確調整大小

回答

相關問題