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.
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开发者_如何学JAVA-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>You can do so by opening the image in frame using colorbox
Just add ?foo=.php to URL and set width and/or height less than image's value.
http://example.com/example.jpg
http://example.com/example.jpg?foo=.php
$('a.gallery').colorbox({height:'50%'});
加载中,请稍侯......
精彩评论