JQuery 在 Shopify 中测试横向或纵向图像

Question

我正在 Shopify 中开发店面并测试 Flexslider 中的产品图片是横向还是纵向：

    <script type="text/javascript">
       $(document).ready(function (){

      $('.flexslider .slides li img').each(function() {
        if ($(this).width() > $(this).height()) {
         $(this).addClass('slide-landscape');
         $('.flex-control-thumbs li img').addClass('thumb-landscape');

       } else if ($(this).height() > $(this).width()) {
         $(this).addClass('slide-portrait');
         $('.flex-control-thumbs li img').addClass('thumb-portrait');
       }
     });
   });
 </script>

出于某种原因，所有图像都获得了 'landscape' 类，而没有肖像。不知道我做错了什么。任何建议都会很棒。

Answer 1

你的基本 if/else 对我有用，可以为你的主要图像编写 classes。参见 fiddle：jsfiddle.net/g28ugzdp

然而，每个条件 $('.flex-control-thumbs li img').addClass(...); 中的第二条语句实际上将 class 添加到 flex-control-thumbs [中列表项的子项的所有图像中=47=]。参见 fiddle：jsfiddle.net/g28ugzdp/1/

您可以通过 2 种方法中的一种来解决这个问题。

如果您的缩略图以正确的纵横比显示，您可以简单地运行主循环遍历 $('.flex-control-thumbs li img') 对象，就像您对 $('.flexslider .slides li img') 所做的一样。
如果您的缩略图需要 classes 与主图像匹配，但不以正确的纵横比在页面上呈现，那么我会使用 for 循环和将 javascript 对象的数组属性依次添加到 select 每个图像，并使用相同的条件逻辑修改匹配的缩略图。请参阅下面的代码：（也在这个fiddle）

$(document).ready(function(){
  var images = $('.flexslider .slides li img'),
      thumbs = $('.flex-control-thumbs li img');
   
  for ( var i = 0; i < images.length; i++ ) {
      if (images[i].width > images[i].height) {
        $(images[i]).addClass('slide-landscape');
        $(thumbs[i]).addClass('thumb-landscape');
      } else {
        $(images[i]).addClass('slide-portrait');
        $(thumbs[i]).addClass('thumb-portrait');
      }
  };
});

.slide-landscape {border-top:8px solid orange;}
.slide-portrait {border-left:8px solid green;}

.thumb-landscape {border-top:4px solid red;}
.thumb-portrait {border-left:4px solid blue;}

li {display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flexslider">
<article class="flex-control-thumbs">
<ul>
<li><img src="http://placekitten.com/g/20/40" /></li>
<li><img src="http://placekitten.com/g/40/20" /></li>
<li><img src="http://placekitten.com/g/20/40" /></li>
<li><img src="http://placekitten.com/g/40/20" /></li>
</ul>
</article>

<article class="slides">
<ul>
<li><img src="http://placekitten.com/g/200/300" /></li>
<li><img src="http://placekitten.com/g/300/200" /></li>
<li><img src="http://placekitten.com/g/200/300" /></li>
<li><img src="http://placekitten.com/g/300/200" /></li>
</ul>
</article>
</div>

此外，您可能希望将 if 条件设置为 >= 或将 else if 更改为 else，这样您就可以捕捉到任何情况图片完全正方形。

JQuery 在 Shopify 中测试横向或纵向图像

JQuery test for landscape or portrait image in Shopify

jquery

shopify

flexslider