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

Question

I'm developing a shopfront in Shopify and test whether a product image in a Flexslider is landscape or portrait:

    <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>

For some reason, the images all get the 'landscape' classes, and never the portrait. Not sure what I'm doing wrong. Any advice would be great.

Answer 1

Your basic if/else works for me to write classes to your main images. See fiddle: jsfiddle.net/g28ugzdp

However the 2nd statement in each condition $('.flex-control-thumbs li img').addClass( ... ); actually adds the class to ALL images that are children of list items within the flex-control-thumbs class. See fiddle: jsfiddle.net/g28ugzdp/1/

You can solve for that in 1 of 2 ways.

1. If your thumbnail images are displayed at their correct aspect ratios, you can simply run the main loop over the $('.flex-control-thumbs li img') object in the same way that you do with $('.flexslider .slides li img') .
2. If your thumbnails need to have their classes match the main image, but don't render on the page in the correct aspect ratio, then I would use a for loop and the array properties of your javascript objects to select each image sequentially and modify the matching thumbnail with the same conditional logic. See code below: (also on this 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> 

Also you may want to set your if condition to be >= or change your else if to be just else so that you can catch any cases where the image is perfectly square.