Можно ли динамически создать увеличенное изображение в модной коробке? - PullRequest
Новая
       24

Можно ли динамически создать увеличенное изображение в модной коробке?

0 голосов
/ 14 марта 2019

Я отслеживаю предыдущий пост ( Необычное поле с одним изображением * ), чтобы узнать, возможно ли использовать уменьшенное изображение в fancybox для динамического создания большего отображаемого изображения. Я знаю, что вы можете использовать document.createElement ("IMG"); чтобы добавить увеличенную версию существующего изображения в ваш документ, или вы можете использовать target.style.width и target.style.height, чтобы изменить размер изображения и назначить его другому идентификатору, но я не могу получите fancybox для доступа и использования этой увеличенной версии миниатюры. Вам всегда нужно 2 размера для каждого изображения?

Вот код, который я использовал. Он будет изменять размеры изображений самостоятельно, но, похоже, не работает с fancybox. Я определяю следующую функцию javascript для работы с изображениями: 

<script>function magnify() { 
var thumbnail = document.getElementById('image_2');
var target = document.getElementById('image_2_larger');
var w = thumbnail.width;
var h = thumbnail.height;
target.style.width= w*1.5 +'px';
target.style.height= h*1.5 +'px';
</script>   

<body>
<p class="imglist">
<a id="image_2_larger" href="smallImage.jpg" 
onclick="magnify()" data-fancybox> 
<img id="image_2" src="smallImage.jpg"></a></p>
</body>

Нажатие на ссылку активирует лайтбокс, но id = "image_2_larger" отображается в нормальном размере. Я подтвердил, что javascript создаст увеличенное изображение, если я просто сделаю это без fancybox 

<img id="target" src="smallImage.jpg" onclick="magnify()">
<img id="thumbnail" src="smallImage.jpg">

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Кажется, работает противоположная стратегия, предложенная в последнем комментарии Яниса.Вместо того, чтобы пытаться использовать миниатюру и увеличивать ее, вы можете просто использовать увеличенное изображение и уменьшить его, как показано здесь. 

<script>
  function shrinkImage() {
    var thumbnail = document.getElementById('image_2');
    var w = thumbnail.width;
    var h = thumbnail.height;
    thumbnail.style.width = w*0.5 +'px';
    thumbnail.style.height = h*0.5 +'px';
    return;
  }
</script>

<body>
  <p class="imglist">
    <a href="largerImage.jpg" data-fancybox>
    <img id="image_2" src="largerImage.jpg" onload="shrinkImage()"></a>
  </p>
</body>
0 голосов
/ 14 марта 2019

Do you always need 2 sizes for each image? - идея любого скрипта лайтбокса заключается в том, что вы отображаете версию изображения с измененным размером для экономии полосы пропускания, повышения скорости загрузки страницы и т. Д., А затем используете скрипт для отображения изображений в полном размере, не заставляя пользователя покидать веб-страницу.

Очевидно, что вы не обязаны создавать две версии образа, и вы можете сделать это следующим образом - <a data-fancybox href="big-image.jpg"><img width="200" src="big-image.jpg" /></a>, но это не практично.

Но, если вы хотите запустить fancybox (иэффект увеличения), используя один элемент <img>, а затем посмотрите на эту демонстрацию - https://codepen.io/fancyapps/pen/JzdXxp?editors=1010

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...