Prestige theme - hover effect on product page

Highlighted
New Member
2 0 0

Hi there.

I am trying to extend the product-template.liquid template with some custom code, where i am iterating over all of the different images/thumbnails in an inline script tag, to switch the main product images src with the thumbnails src value.
I have a half working example right now, but it keeps using the value of the last item in the foreach loop, instead of going through all of the items.

My code:

HTML/Markup:

     {%- case media.media_type -%}
          {%- when 'image' -%}
          {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

            <div id="Media{{ media.id }}" data-image-custom-src='{{ image_url }}' tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
              <div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
                
                <img class="ProductItem__Image Image--lazyLoad Image--fadeIn regular-img{{ product.media.id[0] }}" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
                <span class="Image__Loader"></span>

                <noscript>
                  <img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
                </noscript>
              </div>
            </div>


        {%- if section.settings.stack_images -%}
                      <a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
                        <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
                        {{- nav_item_badge -}}
                      </a>
                    {%- else -%}

                      <a onmouseover="hoverIn();" onmouseout="hoverOut();" href="{{ media | img_url: '1024x' }}" data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %} ProductItem__ImageWrapper {% if has_alternate_image %}ProductItem__ImageWrapper--withAlternateImage{% endif %} thumbnail-img{{forloop.index }}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}" data-thumbnail-src="{{media}}">
                        <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
                        {{- nav_item_badge -}}
                      </a>

                    {%- endif -%}


Script:

<script>
  var image_element = document.querySelector(".regular-img");

    {% for media in product.media %}
    
    

var hest = '{{media | json}}';
var ged = '{{ forloop.index }}';
console.log(hest);
console.log(ged);

var productThumbnail = document.querySelector(".thumbnail-img{{forloop.index}}");



  
var thumbnail_data_id = productThumbnail.getAttribute("data-media-id");

var image_data_id = productThumbnail.getAttribute("data-media-id");
console.log(thumbnail_data_id)
console.log(image_data_id)


console.log(image_element)
{% endfor %}



{% for media in product.media %}
{%- if media_count > 1 -%}

  function hoverIn() {

    productThumbnail = document.querySelector(".thumbnail-img" + {{forloop.index}});
var productthumbnailsrc=productThumbnail.getAttribute('href');

    console.log(productThumbnail)
    console.log(productthumbnailsrc)

    image_element.setAttribute("data-original-src", productthumbnailsrc);
    image_element.setAttribute("data-srcset", productthumbnailsrc);
    image_element.setAttribute("srcset", productthumbnailsrc);
    image_element.setAttribute("src", productthumbnailsrc);
    image_element.setAttribute("data-src", productthumbnailsrc);


  
}
  
  function hoverOut() {

  }
  {%- endif -%}

  {% endfor %}




  </script> 


I am kinda lost right now, i hope that you guys can help me.

Thanks.

0 Likes
Highlighted

Hello @mhn2012 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 0

Hi there.

The url is https://shop.menuspace.com/collections/furniture/products/marble-plinth.

And i dont know about the reference url site, as i mentioned the code is custom.

Thanks.

0 Likes