Изменить изображение на видео - PullRequest
Новая
       27

Изменить изображение на видео

0 голосов
/ 30 апреля 2020

У меня есть галерея изображений, где вы можете изменить отображаемое изображение с помощью «ввода мышью», показанного на той же странице. Теперь я хочу добавить видео в галерею, и оно не работает с кодом, который я предоставил для изображений. Проблема в том, что я хочу, чтобы фотографии и видео оставались определенного размера. Поскольку я хочу добавить видео, тег img не будет отображать видео в качестве источника, и когда я изменяю img на iframe, видео работает просто отлично, но изображения больше не реагируют. Вот мой код:

HTML

<div class="slide_work">
 <img src="images/Illustration/puzzled.png">
</div>

<div class="slide_thumbs">
 <div id ="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
 <div class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>

CSS

.slide_work > img {
 float:right;
 height:auto;
 width:auto;
 max-height:70vh;
 max-width:100%;

 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
}

(я попытался добавить еще один блок в CSS, где я изменяю " img "to" iframe ", но он ничего не делает с точки зрения отзывчивости изображений.)

JavaScript

$( ".puzzled_img" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'images/Illustration/puzzled.png');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_vid").removeAttr('id', 'thumbs_active');
})

$( ".puzzled_vid" )
 .mouseenter(function() {
  $(".puzzled").attr('src', 'https://player.vimeo.com/video/12345678');
  $(this).attr('id', 'thumbs_active');
  $(".puzzled_img").removeAttr('id', 'thumbs_active');
})

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Вот как я решил сделать это в итоге:

HTML

<div class="slide_work">
    <div class="slide_item_img">
        <img class="slide_item_img" src="images/Illustration/puzzled.png"></div>
    <div class="slide_item_vid" style="display:none; float:right">
        <iframe class="slide_item_vid" style="display:none; float:right" src="https://player.vimeo.com/video/12345678" width="640" height="747" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
</div>

CSS

$( ".puzzled_img" )
  .mouseenter(function(){
    $(".slide_item_vid").css("display", "none");
    $(".slide_item_img").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_vid").removeAttr('id', 'thumbs_active');
  })

$( ".puzzled_vid" )
  .mouseenter(function(){
    $(".slide_item_img").css("display", "none");
    $(".slide_item_vid").css("display", "inherit");
    $(this).attr('id', 'thumbs_active');
    $(".puzzled_img").removeAttr('id', 'thumbs_active');
  })
0 голосов
/ 30 апреля 2020

Вместо того, чтобы заменять атрибут src тега <img> или заменять элемент, просто добавьте больше слайдов и покажите / скройте те, которые в данный момент отображаются в зависимости от значения индекса.

Пример ниже имеет два слайда, где один имеет класс hidden. Вы можете скрыть этот элемент с помощью CSS. Миниатюры имеют data-attribute со значением индекса, указывающим, какой элемент в списке слайдов они контролируют. Всякий раз, когда вы наводите миниатюру, она будет искать слайд с правым указателем и отображать его, скрывая каждый другой слайд. 

<div class="slide_work">
  <div class="slide_item">
    <img src="images/Illustration/puzzled.png">
  </div>
  <div class="slide_item hidden">
    <iframe src="https://player.vimeo.com/video/12345678"></iframe>
  </div>
</div>

<div class="slide_thumbs">
  <div data-index="0" id="thumbs_active" class="puzzled_img" style="background-image:url(images/Illustration/puzzled_img.png);"></div>
  <div data-index="1" class="puzzled_vid" style="background-image:url(images/Illustration/puzzled_vid.png);"></div>
</div>

var $slides = $('.slide_item');

$('.slide_thumbs > div').on('mouseenter', function() {
  var $this = $(this);
  var index = $this.data('index');
  var $target = $slides.eq(index);
  $slides.addClass('hidden');
  $target.removeClass('hidden');
});
...