Question

我有一个每个函数，用于确定何时在ID中单击链接。点击发生后，它会获取相关属性并将它们与主图像相关联。

此功能还可以包含视频，因此如果html包含名为#video的ID，则会获取视频属性并将其粘贴到预定义的<video>中。

我目前还有其他功能，不在下面的笔中，如destroyZoom()（它会破坏专门用于.main-image的缩放功能）。

问题：当用户在图像（尤其是视频）之间切换时，缩放图层会自动激活图像顶部。（我已经为这些功能设置了占位符。）

有人可以推荐一种处理这种情况的优雅方式，或者我是如何编写此功能的。

请注意：第5张图片是视频。

编辑：更新下面的CODEPEN和CODE以包含变焦功能

$('#product-gallery-super').children().click(function(e) {
  e.preventDefault();
  var prodImg = $(this).attr('data-image');
  var imgSrc = $(this).children().attr('src')
  var vidCheck = false;
  var mainImg = $('.main-image');

  if (imgSrc != 'http://yi.yoga/images/cs.jpg') {

    $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail");

    if ($(this).attr('id') == 'video') {
      $('.main-image').hide();

      if (!$('.product-video').hasClass('product-video')) {

        var videoLink = $(this).attr('href');
        var videoImg = $(this).find('img').attr('src');

        var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100%" height="auto"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video>  <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>';

        $('.container').prepend(video);

        // START VIDEO FUNCTION videoInitate();

      }

    } else {
      mainDestroy()

      $('.video-container').remove();

      $('.main-image').show();
      $('.main-image').attr('src', prodImg);

      $('.product-zoom').elevateZoom({
        cursor: 'pointer',
        zoomType: "window",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750,
        responsive: true,
        borderSize: 1,
        borderColour: '#DDDDDD',
        lensBorder: 1,
        lensSize: 200,
        scrollZoom: false,
        zoomWindowFadeOut: 1,
      });

    }

  }

});

function mainDestroy() {
  $('.zoomContainer').remove();
  $('.product-zoom').removeData('elevateZoom');
  $('.product-zoom').removeData('zoomImage');
}

.active-thumbnail {
  display: inline-block;
  border: 1px solid black;
}
#product-gallery-super img {
  width: 61px;
  height: 79px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>

<div class="container">
  <img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)">

  <div id="product-gallery-super">
    <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1">
      <img src="http://placehold.it/61x79?text=1">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2">
      <img src="http://yi.yoga/images/cs.jpg">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3">
      <img src="http://placehold.it/61x79?text=3">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4">
      <img src="http://placehold.it/61x79?text=4">
    </a>
    <a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID">
      <img src="http://placehold.it/61x79?text=5">
    </a>
    <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6">
      <img src="http://placehold.it/61x79?text=6">
    </a>

  </div>

</div>

Answer 1

你有没有想过这个？如果问题是视频在缩小到可管理维度之前会短暂占据整个屏幕，请尝试使用<video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="300px" height="auto">代替width=100%。

更改点击事件的属性（太快）

1 个答案: