Hide 1st image on product page & stop zoom on hover

Solved
Tourist
9 1 0

Hello!

 

I have a thumbnail image for each product that I only want to show on the collection pages and need to hide that 1st image once on the product pages.  I'd like the thumbnail to be hidden and have the featured image be image #2.  I've seen code to do this using offset, and have made it work on an old theme I had, but can't seem to get it working on my new theme.  Developer was less than helpful, unfortunately, so I'm on my own.

 

Also, I hate that zoom effect on hover, so if there's a way to stop that, I'd be happy too!  lol  Nothing in the theme customizer, unfortunately.

 

Code is below.  If anyone could assist, I would be so grateful!  :)

 

<div class="{% if settings.thumbnail_slider_type == 'vertical' %}col-sm-7{% else %}col-sm-7{% endif %} product-view-media">
            <div class="product-img-box">
              <div class="row">
                <div class="images-container col-sm-12">
                  <div class="more-views" data-moreview='{}' id="moreview-slider" style="min-width:100%; max-width: 100%;">
                    <div class="row">
                      <div class="col-sm-12 {% if settings.thumbnail_slider_type == 'vertical' %}col-md-10 {% if settings.enale_rtl %}f-left{% else %}f-right{% endif %}{% endif %}">
                        <div class="viewmore-main product-cover slider slick-slider{% if settings.thumbnail_slider_type == 'vertical' %} is_vertical{% endif %} ">
                          {% include 'image-main-product-page', image: featured_img, is_active: true %}
                          {% for image in product.images %}
                          {% if image.src != featured_img_src %}
                          {% include 'image-main-product-page', image: image, is_active: false %}                            
                          {% endif %}
                          {% endfor %}
                        </div>
                        <a class="rsUni" href="#" title="{{ 'products.product.open_light_gallery' | t }}" data-title-trans="products.product.open_light_gallery"><div class="rsFullscreenIcn">{% include 'icon-expand' %}</div></a>
                      </div>
                      <div class="col-sm-12{% if settings.thumbnail_slider_type == 'vertical' %} col-md-2{% else %} is_horizontal{% endif %}">
                        <div class="viewmore-thumbs slider slick-slider">
                          {% if featured_img %}
                          {% include 'image-moreview-product-page', image : featured_img, id_zoom : "#FeaturedImage-product-template", is_active: true %}
                          {% endif %}
                          {% for image in product.images %}          
                          {% if image.src != featured_img_src %}
                          {% include 'image-moreview-product-page', image: image, id_zoom : "#FeaturedImage-product-template", is_active: false %}
                          {% endif %}
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
0 Likes

Success.

Tourist
9 1 0

I finally figured it out!  For anyone else that has this issue...my template was calling out another file for images (including another liquid file), so when I was attempting the "offset" solution on this template, it didn't work, so I had to go to the other liquid file and add the offset code there.

 

{% for image in product.images offset:1 %} then the code on my template for images {% endfor %}

 

0 Likes