Открыть изображение в полноэкранном режиме как видео (при клике на кнопку)

Question

Как сделать чтобы при клике на кнопку открывалось в полноэкранном режиме изображение, которое указано в атрибуте data-img?

По сути на что заменить this?

$('.btn-fullscreen').on('click', function () {
    this.requestFullscreen();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary btn-fullscreen" type="submit" data-img="https://thumbs.gfycat.com/CapitalTallAracari-size_restricted.gif">Fullscreen 1</button>
<button class="btn btn-primary btn-fullscreen" type="submit" data-img="https://steamuserimages-a.akamaihd.net/ugc/351645122245857856/C4FAA538ACEAD9B020D1974ADAA693FDA202CEE0/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false">Fullscreen 2</button>

Answer 1

Не совсем понятен ваш вопрос: "на что заменить this?"

Но, например, чтобы из this взять атрибут data-img можно воспользоваться стандартным js-функционалом this.dataset.img или выковырять его с помощью jQuery — $(this).data('img'). Остаётся непонятным вопрос касательно размещения вашего изображения, но допустим это будет специально созданный #image на странице. Хотя при желании и умении никто не мешает проиллюстрировать хоть даже саму кнопку.

$('.btn-fullscreen').on('click', function () {
  image.style.backgroundImage = `url(${this.dataset.img})`;
  image.requestFullscreen();
});

.fullimage {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="image" class="fullimage"></div>

<button class="btn btn-primary btn-fullscreen" type="submit" data-img="https://thumbs.gfycat.com/CapitalTallAracari-size_restricted.gif">Fullscreen 1</button>
<button class="btn btn-primary btn-fullscreen" type="submit" data-img="https://steamuserimages-a.akamaihd.net/ugc/351645122245857856/C4FAA538ACEAD9B020D1974ADAA693FDA202CEE0/">Fullscreen 2</button>

В здешней песочнице Fullscreen отказывается работать на том же codepen.io прекрасно отрабатывает.

БЛОГ НА HUSL

Открыть изображение в полноэкранном режиме как видео (при клике на кнопку)

Ответы (1 шт):