How do you make an image opened in colorbox scroll

2019-05-31 06:41发布

站内问答 / JavaScript
413 3 6

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

3条回答
闹够了就滚
2楼-- · 2019-05-31 06:54

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>

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-05-31 06:58

You can do so by opening the image in frame using colorbox

查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
4楼-- · 2019-05-31 07:06

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%'});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)