如何使图像在colorbox中可以滚动 [英] How do you make an image opened in colorbox scrollable
问题描述
我想让我在彩色框中打开的图像显示为全尺寸，而不会对其进行调整大小，然后应用滚动条允许查看较大的图像。我的一些图像很高，当调整大小时，东西会变得像素化。
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?
我直接链接到一个图像：
I am linking directly to an image:
<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>
推荐答案
我不想把查询字符串我的网址，所以我想出了这个。
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中可以滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
