javascript - 旋转木马图像相同高度

标签 javascript jquery html css

我有一个图片/视频轮播，但我无法将轮播中的所有内容保持在同一高度。

当您点击缩略图时，主图像的高度不匹配。

如何让所有东西保持相同的高度，同时保持响应？

(我添加了一些图片来说明我的意思)

enter image description here

enter image description here 这是 codepen .

编辑:我想让轮播中显示的主要图像保持相同的高度，而不是缩略图。

$(document).ready(function() {
  // get all images loaded
  var images = $(".chair-class");
  // thumbnails containers
  var thumbnailContainer = $("#thumbnails");
  var iframe1 = $('#sketchfab-iframe-1')[0];
  var iframe2 = $('#sketchfab-iframe-2')[0];
  var player1 = $f(iframe1);
  var player2 = $f(iframe2);
  // generate thumbnail images
  generateThumbnails(images, thumbnailContainer);
  // listeners for controls arrows
  $(".prev-next-button").on("click", function() {
    player1.api('pause');
    player2.api('pause');
    // get the images
    var currentImageIndex = images.index($(".chair-class[data-active=true]"));
    var isPrevious = $(this).hasClass("previous");
    var nextIndex;
    if (isPrevious) {
      if (currentImageIndex === 0) {
        nextIndex = images.length - 1;
      }

      if (currentImageIndex > 0) {
        nextIndex = currentImageIndex - 1;
      }
    } else {
      if (currentImageIndex === images.length - 1) {
        nextIndex = 0;
      }

      if (currentImageIndex < images.length - 1) {
        nextIndex = currentImageIndex + 1;
      }
    }

    // remove any active class from images
    images.removeClass("active").attr('data-active', "false");
    // get the next active image and add active class to that next current image
    var $nextImage = $(images[nextIndex]);
    var iframeId = $nextImage.data('iframe');
    if (iframeId) {
      $(images[nextIndex]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      $(images[nextIndex]).addClass("active").attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  $(".thumb").on("click", function(event) {
    event.preventDefault();
    var images = $(".chair-class");
    var indexSelected = $(this).data("img-index");
    var currentShown = images.index($(".chair-class[data-active=true]"));
    if (currentShown === indexSelected) return false;
    player1.api('pause');
    player2.api('pause');
    images.removeClass("active").attr('data-active', "false");
    var iframeId = $(this).data('iframe');
    if (iframeId) {
      $(images[indexSelected]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      images.removeClass("active");
      $(images[indexSelected]).addClass('active').attr('data-active', "true");;
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  function generateThumbnails(images, container) {
    var ul = $("<ul>");
    images.each(function(index, element) {
      var currentThumb = $("<img>");
      var li = $("<li>");
      var src = $(this).attr("src");
      currentThumb.attr("src", src);
      currentThumb.attr("class", "thumb");
      currentThumb.data("img-index", index);
      var iframe = $(this).data('iframe');
      if (iframe) {
        currentThumb.data("iframe", iframe);
      }
      li.append(currentThumb);
      ul.append(li);
    });
    container.append(ul);
  }
});
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}


/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

#chair,
.chair-class {
  position: absolute;
  width: 100%;
  height: auto;
  max-width: 600px;
  max-height: 400px;
  margin: 0 auto;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.chair-class.active {
  position: relative;
  opacity: 1;
}

#prev {
  position: absolute;
  color: black;
  left: 0;
  top: 0;
  bottom: 0;
}

#next {
  position: absolute;
  color: black;
  right: 0;
  top: 0;
  bottom: 0;
}

#prev p,
#next p {
  font-size: 3em;
}

#imgDetail {
  position: relative;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}

#imgDetail a {
  text-decoration: none;
  display: flex;
  padding: 3%;
  justify-content: center;
  align-items: center;
}

#imgDetail a:hover {
  background-color: #333;
  color: white;
  opacity: 0.5;
}

#imgDetail ul {
  margin: 0 auto;
  display: block;
}

#thumbnails {
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.thumb {
  width: 21%;
  height: auto;
  margin-top: 15px;
  cursor: pointer;
}

#imgDetail li {
  display: inline;
}

#thumbnails ul {
  margin: 0 auto;
  display: block;
}

#thumbnails li {
  display: inline;
  padding-right: 2%;
}

#thumbnails li:last-child {
  padding-right: 0;
}

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40vw;
}

.sketchfab-iframe {
  opacity: 0;
  margin: 0 auto;
  transition: opacity .5s;
  display: none;
}

.sketchfab-iframe.active {
  opacity: 1;
  position: relative;
  display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Daniel Pollack</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
  </script>
</head>

<body id="green-room">

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
      <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <!--CONTROLS-->
      <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
        <p>&#10092;</p>
      </a>
      <a href="javascript:void(0)" id="next" class="prev-next-button next">
        <p>&#10093;</p>
      </a>
    </div>

    <!--Thumbnails-->
    <div id="thumbnails">
    </div>


</html>

最佳答案

通过将所有图像高度设置为 70vh 来修复。

我猜 StackOverflow Fiddle 有问题。

查看我的 codepen如果这就是您要找的，请告诉我。

$(document).ready(function() {
  // get all images loaded
  var images = $(".chair-class");
  // thumbnails containers
  var thumbnailContainer = $("#thumbnails");
  var iframe1 = $('#sketchfab-iframe-1')[0];
  var iframe2 = $('#sketchfab-iframe-2')[0];
  var player1 = $f(iframe1);
  var player2 = $f(iframe2);
  // generate thumbnail images
  generateThumbnails(images, thumbnailContainer);
  // listeners for controls arrows
  $(".prev-next-button").on("click", function() {
    player1.api('pause');
    player2.api('pause');
    // get the images
    var currentImageIndex = images.index($(".chair-class[data-active=true]"));
    var isPrevious = $(this).hasClass("previous");
    var nextIndex;
    if (isPrevious) {
      if (currentImageIndex === 0) {
        nextIndex = images.length - 1;
      }

      if (currentImageIndex > 0) {
        nextIndex = currentImageIndex - 1;
      }
    } else {
      if (currentImageIndex === images.length - 1) {
        nextIndex = 0;
      }

      if (currentImageIndex < images.length - 1) {
        nextIndex = currentImageIndex + 1;
      }
    }

    // remove any active class from images
    images.removeClass("active").attr('data-active', "false");
    // get the next active image and add active class to that next current image
    var $nextImage = $(images[nextIndex]);
    var iframeId = $nextImage.data('iframe');
    if (iframeId) {
      $(images[nextIndex]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      $(images[nextIndex]).addClass("active").attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  $(".thumb").on("click", function(event) {
    event.preventDefault();
    var images = $(".chair-class");
    var indexSelected = $(this).data("img-index");
    var currentShown = images.index($(".chair-class[data-active=true]"));
    if (currentShown === indexSelected) return false;
    player1.api('pause');
    player2.api('pause');
    images.removeClass("active").attr('data-active', "false");
    var iframeId = $(this).data('iframe');
    if (iframeId) {
      $(images[indexSelected]).attr('data-active', "true");
      $('.sketchfab-iframe').removeClass('active');
      $('#' + iframeId).addClass('active');
    } else {
      images.removeClass("active");
      $(images[indexSelected]).addClass('active').attr('data-active', "true");;
      $('.sketchfab-iframe').removeClass('active');
    }
  });

  function generateThumbnails(images, container) {
    var ul = $("<ul>");
    images.each(function(index, element) {
      var currentThumb = $("<img>");
      var li = $("<li>");
      var src = $(this).attr("src");
      currentThumb.attr("src", src);
      currentThumb.attr("class", "thumb");
      currentThumb.data("img-index", index);
      var iframe = $(this).data('iframe');
      if (iframe) {
        currentThumb.data("iframe", iframe);
      }
      li.append(currentThumb);
      ul.append(li);
    });
    container.append(ul);
  }
});
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 100%;
}


/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

#chair,
.chair-class {
  position: absolute;
  width: auto;
  height: 100%;
  /*     max-width: 600px;
    max-height: 400px; */
  margin: 0 auto;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s;
}

.chair-class.active {
  position: relative;
  opacity: 1;
}

#prev {
  position: absolute;
  color: black;
  left: 0;
  top: 0;
  bottom: 0;
}

#next {
  position: absolute;
  color: black;
  right: 0;
  top: 0;
  bottom: 0;
}

#prev p,
#next p {
  font-size: 3em;
}

#imgDetail {
  position: relative;
  width: 90%;
  margin: 0 auto;
  height: 70vh;
  overflow: hidden;
}

#imgDetail img {
  height: 70vh;
}

#imgDetail a {
  text-decoration: none;
  display: flex;
  padding: 3%;
  justify-content: center;
  align-items: center;
}

#imgDetail a:hover {
  background-color: #333;
  color: white;
  opacity: 0.5;
}

#imgDetail ul {
  margin: 0 auto;
  display: block;
}

#thumbnails {
  max-width: 1000px;
  display: inline-block;
  text-align: center;
}

.thumb {
  width: 21%;
  height: auto;
  margin-top: 15px;
  cursor: pointer;
}

#imgDetail li {
  display: inline;
}

#thumbnails ul {
  margin: 0 auto;
  display: block;
}

#thumbnails li {
  display: inline;
  padding-right: 2%;
}

#thumbnails li:last-child {
  padding-right: 0;
}

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*   top:10vh; */
  height: 70vh;
  opacity: 0;
  margin: 0 auto;
  transition: opacity .5s;
  display: none;
}

.sketchfab-iframe.active {
  opacity: 1;
  position: relative;
  display: block;
}
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<body>

  <div class="slideshow-container">
    <div id="imgDetail">
      <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
      <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
      <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <div class="aspect-ratio">
        <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <!--CONTROLS-->
      <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
        <p>&#10092;</p>
      </a>
      <a href="javascript:void(0)" id="next" class="prev-next-button next">
        <p>&#10093;</p>
      </a>
    </div>

    <!--Thumbnails-->
    <div id="thumbnails">
    </div>
  </div>
</body>

关于javascript - 旋转木马图像相同高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50176148/

上一篇：php - 比较时间时获取数据

下一篇：html - 在句子中定义一个不是主要主题的术语

相关文章：

javascript - 如何阻止此脚本在移动设备上加载？

javascript - 当新建一个包含 .apply 的函数时，.apply 如何工作？

javascript - 以编程方式选择第 N 个选项

javascript - django 模板仅在 jquery 对话框中显示内容

javascript - rails 5，远程 : true form empty data

html - Zurb 基础框架侧边栏

html - 如何关闭 iphone chrome 模拟器中的蓝色覆盖？

javascript - 如何使用 jQuery 将事件处理程序附加到动态生成的 DOM 元素？

javascript - 在追加之前检查 HTML 元素是否存在

html - 具有最大宽度/高度且没有 CSS 的 HTML 中的响应图像

©2024 IT工具网  联系我们