放大镜冲突 - Githubissues

shijie15 commented 7 years ago

图片放大镜跟图片轮播出现一个小冲突，两个在同一个页面，图片放大镜的滑块不能动、高是死的，想把图片放大镜跟图片轮播结合使用但是用不了

photino commented 7 years ago

@shijie15 能不能把你的HTML页面发个链接过来？我看看是怎么回事

shijie15 commented 7 years ago

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Amaze UI swiper 使用演示 | Amaze UI 插件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
   <link href="assets/css/amazeui.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="assets/css/amazeui.swiper.min.css"/>
  <link rel="stylesheet" href="assets/css/amazeui.magnifier.min.css"/>
  <link rel="stylesheet" href="assets/css/demo.css"/>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/amazeui.min.js"></script>
  <script src="assets/js/amazeui.swiper.min.js"></script>
  <script src="assets/js/demo.js"></script>
  <script src="assets/js/amazeui.magnifier.min.js"></script>
</head>
<body>
<div class="am-g cp-list-box">
  <div class="am-container">
    <div class="am-u-lg-12">
      <div class="cp-right am-margin-vertical-lg">
        <div class="am-tabs cp-cont" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
          <div class="am-tabs-bd">
            <div class="am-padding-horizontal-xl cp-list-cont cp_bg">
              <div class="cp-list-top am-cf">
                <div class="am-u-lg-12">
                  <div class="gallery-wrapper" style="background: none; height: 400px;">
                    <div class="swiper-container gallery-top" id="demo">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <figure class="am-magnifier">
                            <img class="small-image" width="342" height="230" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              <div></div>
                              <div class="am-margin-left-sm">
                                <img width="1366" height="768" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              </div>
                          </figure>
                        </div>
                        <div class="swiper-slide">
                          <figure class="am-magnifier">
                            <img class="small-image" width="342" height="230" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              <div></div>
                              <div class="am-margin-left-sm">
                                <img width="1366" height="768" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              </div>
                          </figure>
                        </div>
                        <div class="swiper-slide">
                          <figure class="am-magnifier">
                            <img class="small-image" width="342" height="230" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              <div></div>
                              <div class="am-margin-left-sm">
                                <img width="1366" height="768" src="http://s.amazeui.org/media/i/demos/bing-1.jpg" alt="Bing rect image">
                              </div>
                          </figure>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-container gallery-thumbs" style="width: 45%;">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image:url(http://s.amazeui.org/media/i/demos/bing-1.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(http://s.amazeui.org/media/i/demos/bing-1.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(http://s.amazeui.org/media/i/demos/bing-1.jpg)"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> 
  </div>
</div>
<script type="text/javascript">
$(function() { $('.small-image').magnify({ shape: 'rect', width: 120 }); });
</script> 
<script type="text/javascript">
  $('#demo').swiper({
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  pagination: '.swiper-pagination',
});
</script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>

photino commented 7 years ago

@shijie15 就你上面这段代码而言，图片放大镜应该可以正常作用，这并没有和图片轮播结合使用啊（没见有引入图片轮播的库）。此外，这里的CSS和JS有重复（只引入.min版本的即可）：

<link rel="stylesheet" href="assets/css/amazeui.magnifier.css"/>
<link rel="stylesheet" href="assets/css/amazeui.magnifier.min.css"/>

<script src="assets/js/amazeui.magnifier.min.js"></script>
<script src="assets/js/amazeui.magnifier.js"></script>

shijie15 commented 7 years ago

放大镜单独可以用，放到轮播图里就出问题了，大哥帮忙看看

photino commented 7 years ago

@shijie15 我大致知道问题所在了，你看看我改后的你的页面：http://oss.arxitics.com/test/magnifier.html 应该能正常显示，如果要和swiper搭配使用有的地方可能还需要再改改

这个放大镜工作的原理是需要使用两张等比例的图片，一个大，一个小，当然你也可以使用同一张，但是必须要求width和height的比例一样，比如这个页面 https://photino.github.io/amazeui-magnifier/docs/demo.html 给出的900x900和300x300（缩放比例为3，算出的hover区域为100x100），以及1920x1080和480x270（缩放比例为4，算出的hover区域为120x68）

shijie15 commented 7 years ago

我有改了一下，但是轮播切换后就出现问题了

photino commented 7 years ago

@shijie15 这个问题产生的原因是swiper插件在.swiper-wrapper上使用了一个平移变换，为了兼容这种情况，我在放大镜插件中引入了一个offsetX选项来修正这种作用。现在你可以把magnifier插件更新到0.2.0版（刚发布），然后改用以下的代码应该就可以了：

<script type="text/javascript">
$(function() {
  var width = $('.swiper-slide').width();
  $('.small-image').each(function(index) {
    $(this).magnify({
      shape: 'rect',
      width: 85,
      offsetX: width * index
    });
  });
});
</script>

具体参考页面：http://oss.arxitics.com/test/magnifier.html

photino / amazeui-magnifier

放大镜冲突 #1