Дополнительное изображение отображается не корректно

<!-- Изображение для товара, если есть -->
               <xsl:if test="image_small != ''">
                  <div id="gallery" class="shop_img">
                     <a href="{dir}{image_large}" target="_blank"><img src="{dir}{image_small}" /></a>
                  </div>
               </xsl:if>

<div class="col-xs-6 col-sm-6 col-md-5 col-lg-5">
         <!-- Изображение для товара, если есть -->
         <xsl:if test="image_small != ''">
            <img id="zoom" src="{dir}{image_small}" data-zoom-image="{dir}{image_large}"/>
            
            <div id="gallery" style="margin-top:30px;">
               <a href="#" data-image="{dir}{image_small}" data-zoom-image="{dir}{image_large}">
                  <img id="zoom" src="{dir}{image_small}" height="100"/>
               </a>
               
               <xsl:for-each select="property_value[tag_name='img'][file !='']">
                  <a href="#" data-image="{../dir}{file_small}" data-zoom-image="{../dir}{file}">
                     <img id="zoom" src="{../dir}{file_small}" height="100"/>
                  </a>
               </xsl:for-each>
            </div>
         </xsl:if>
      </div>