Question

我希望我在彩色框中打开的图像显示为全尺寸而不应用调整大小，然后应用滚动条以允许查看较大的图像。我的一些图像非常高，当调整大小时，事物会变得像素化。

目前，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>

Answer 1

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

＆＃13;

$(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>'
    });
  });
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用colorbox

在框架中打开图像

Answer 3

只需将?foo=.php添加到网址，并将宽度和/或高度设置为小于图片的值。

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

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

如何在彩色框中滚动打开图像

3 个答案: