如何使在颜色框中打开的图像可滚动答案

【问题标题】：How do you make an image opened in colorbox scrollable如何使在颜色框中打开的图像可滚动
【发布时间】：2010-05-16 19:05:21
【问题描述】：

我希望我在颜色框中打开的图像以全尺寸显示，而不应用调整大小，然后应用滚动条以允许查看更大的图像。我的一些图像非常高，并且在缩小尺寸时会出现像素化。

目前，colorbox 只是将我的图像大小调整为可用高度/宽度的大小。有没有办法让所有图像全尺寸显示，并在颜色框中溢出可滚动？

我直接链接到图片：

<a href="/myimage.png" title="My Image" class="colorbox imagefield imagefield-imagelink imagefield-field_portfolio_screenshot initColorbox-processed cboxElement" rel="gallery-12">
  <img src="/thumb/myimage.png" alt="image" title="My Image" class="imagecache imagecache-portfolio_screenshot_thumb" height="50" width="50">
</a>

【问题讨论】：

顺便说一句，我找到了执行 maxHeight: false 的选项，但这只是设置它，因此浏览器滚动条将滚动颜色框。我希望颜色框本身有一个滚动条，并且颜色框设置为 80% 的最大高度。

标签： javascript jquery drupal jquery-plugins colorbox

【解决方案1】：

我不想在我的网址上添加查询字符串，所以我想出了这个。

$(document).ready(function(){
  var height = ((window.innerHeight || $window.height()) - 100);
  var width;
  $(".iframed-image").each(function() {
    $("<img/>").attr("src", $(this).attr('href')).load(function() {
      width = this.width;
    });
    $(this).colorbox({
        html: '<div style="overflow-y:scroll;height:' + height + 'px;width:' + width + 'px;"><img src="' + $(this).attr('href') + '" /></div>'
    });
  });
});

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://yourjavascript.com/15102656623/jquery-colorbox-min-1-6-4.js"></script>
  </head>
  
  <body>
    
    <h2>Image in iframe</h2>
    <p><a href="http://lorempixel.com/640/1044/" title="Random 640x1044 image" class="iframed-image">Random 640x1044 Image in iframe</a></p>
    
  </body>
</html>

【讨论】：

【解决方案2】：

您可以通过使用颜色框在框架中打开图像来做到这一点

【讨论】：

但是如果它是一个图像的直接链接，如何将它放入框架中。是否有某种 jquery 可以改变链接图像以这种方式打开？
只需将图像放在单独的文件中，然后使用彩盒框架打开此文件。

【解决方案3】：

只需将?foo=.php 添加到 URL 并设置宽度和/或高度小于图像的值。

http://example.com/example.jpg
http://example.com/example.jpg?foo=.php

$('a.gallery').colorbox({height:'50%'});

【讨论】：