How do you make an image opened in colorbox scroll

2019-05-31 07:12发布

问题:

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>

回答1:

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>



回答2:

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



回答3:

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