【问题标题】:How do you make an image opened in colorbox scrollable如何使在颜色框中打开的图像可滚动
【发布时间】:2010-05-16 19:05:21
【问题描述】:

我希望我在颜色框中打开的图像以全尺寸显示,而不应用调整大小,然后应用滚动条以允许查看更大的图像。我的一些图像非常高,并且在缩小尺寸时会出现像素化。

目前,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>

【问题讨论】:

  • 顺便说一句,我找到了执行 maxHeight: false 的选项,但这只是设置它,因此浏览器滚动条将滚动颜色框。我希望颜色框本身有一个滚动条,并且颜色框设置为 80% 的最大高度。

标签: javascript jquery drupal jquery-plugins colorbox


【解决方案1】:

我不想在我的网址上添加查询字符串,所以我想出了这个。

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

    您可以通过使用颜色框在框架中打开图像来做到这一点

    【讨论】:

    • 但是如果它是一个图像的直接链接,如何将它放入框架中。是否有某种 jquery 可以改变链接图像以这种方式打开?
    • 只需将图像放在单独的文件中,然后使用彩盒框架打开此文件。
    【解决方案3】:

    只需将?foo=.php 添加到 URL 并设置宽度和/或高度小于图像的值。

    http://example.com/example.jpg
    http://example.com/example.jpg?foo=.php

    $('a.gallery').colorbox({height:'50%'});
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-13
      • 1970-01-01
      相关资源
      最近更新 更多