Question

这是一个url，它是一个wordpress网站，colorbox是在主题中构建的，classipress 3并没有更改它的选项。如果您点击任何照片颜色框，弹出窗口将会打开

#colorbox {
  display: block;
  visibility: visible;
  top: 1028.89px;
  left: 482px;
  position: absolute;
  width: 442px;
  height: 355px;
  opacity: 1;
}

#colorbox {
  outline: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

#cboxOverlay {
  background: url(images/overlay.png) repeat 0 0;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

<link href="http://www.jokerleb.com/wp-content/themes/classipress/theme-framework/js/colorbox/colorbox.css" rel="stylesheet" />
<script src="http://www.jokerleb.com/wp-content/themes/classipress/theme-framework/js/colorbox/jquery.colorbox.min.js"></script>
<div id="cboxOverlay" style="opacity: 0.9; cursor: pointer; visibility: visible;"></div>
<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 1028.89px; left: 482px; position: absolute; width: 442px; height: 355px; opacity: 1;">
  <div id="cboxWrapper" style="height: 355px; width: 442px;">
    <div>
      <div id="cboxTopLeft" style="float: left;"></div>
      <div id="cboxTopCenter" style="float: left; width: 400px;"></div>
      <div id="cboxTopRight" style="float: left;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxMiddleLeft" style="float: left; height: 313px;"></div>
      <div id="cboxContent" style="float: left; width: 400px; height: 313px;">
        <div id="cboxLoadedContent" style="width: 400px; overflow: hidden; height: 285px;"><img class="cboxPhoto" src="http://www.jokerleb.com/wp-content/uploads/2017/05/584970-800x600.jpg" height="285" width="380" style="cursor: pointer; width: 380px; height: 285px; float: none;"></div>
        <div id="cboxTitle" style="float: left; display: block;">IMG_9935</div>
        <div id="cboxCurrent" style="float: left; display: block;"></div><button type="button" id="cboxPrevious" style="display: block;">previous</button><button type="button" id="cboxNext" style="display: block;">next</button><button id="cboxSlideshow" style="display: none;"></button>
        <div id="cboxLoadingOverlay"
          style="float: left; display: none;"></div>
        <div id="cboxLoadingGraphic" style="float: left; display: none;"></div><button type="button" id="cboxClose">close</button></div>
      <div id="cboxMiddleRight" style="float: left; height: 313px;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxBottomLeft" style="float: left;"></div>
      <div id="cboxBottomCenter" style="float: left; width: 400px;"></div>
      <div id="cboxBottomRight" style="float: left;"></div>
    </div>
  </div>
  <div style="position: absolute; width: 9999px; visibility: hidden; max-width: none; display: none;"></div>
</div>

由于stackoverflow上的iframe错误，但片段无法正常工作，但无论如何。我更改了#colorbox和#cboxWrapper的宽度和高度以及cboxphoto和cboxoverlay没有发生任何事情。我只想弹出打开全屏。如果可能的话，它下方的缩略图。

Answer 1

初始化colorbox时，可以传递以下参数来设置弹出窗口的高度和宽度：

-initialWidth: "your width",
-initialHeight: "your height"

签出以下js文件（已包含在缩小版中） http://www.jokerleb.com/wp-content/themes/classipress/theme-framework/js/colorbox/jquery.colorbox.js

这里所有参数都使用默认值定义。因此，在初始化colorbox时，您可以传递任何参数，即要更改的默认值。

如果您无法找到初始化的位置，可以使用以下代码：

$.colorbox.remove();
$('.example').colorbox(
    {
        initialWidth: "your width",
        initialHeight: "your height",    
        'any other parameter you want to change'
    }
);

这将改变弹出窗口的大小。

改变颜色盒大小wordpress

1 个答案: