如何使在 colorbox 中打开的图像可滚动

本文介绍了如何使在 colorbox 中打开的图像可滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望我在 colorbox 中打开的图像以全尺寸显示，而不对其应用调整大小，然后应用滚动条以允许查看更大的图像.我的一些图像非常高，并且在缩小尺寸时会变得像素化.

I would like my images that I open in colorbox to be displayed fullsize with no resizing applied to them and then apply scrollbars to allow for viewing the larger images. Some of my images are quite tall and things get pixelated when resized down.

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

Currently colorbox just resizes my images down to the size of the available height/width. Is there a way to make all images display fullsize with overflow scrollable in 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>

推荐答案

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

I don't want to tack on query strings onto my url, so I came up with this.

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

这篇关于如何使在 colorbox 中打开的图像可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！