Как сделать изображение, открытое в прокручиваемом окне цвета - PullRequest
Новая
       19

Как сделать изображение, открытое в прокручиваемом окне цвета

1 голос
/ 16 мая 2010

Мне бы хотелось, чтобы мои изображения, которые я открываю в палитре цветов, отображались в натуральную величину без изменения размера, а затем применялись полосы прокрутки, чтобы можно было просматривать изображения большего размера. Некоторые из моих изображений довольно высокие, и при уменьшении их размера все становится пиксельным.

В настоящее время colorbox просто изменяет размеры моих изображений до размера доступной высоты / ширины. Есть ли способ сделать так, чтобы все изображения отображались в полноразмерном виде с прокруткой при переполнении в 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>

Ответы [ 3 ]

1 голос
/ 31 августа 2012

Я не хочу привязывать строки запроса к моему URL, поэтому я придумал это. 

$(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 голосов
/ 27 ноября 2011

Просто добавьте ?foo=.php к URL и установите ширину и / или высоту меньше значения изображения.

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

$('a.gallery').colorbox({height:'50%'});
0 голосов
/ 17 мая 2010

Вы можете сделать это, открыв изображение в рамке, используя colorbox

...