Question

我们有一个图像滑块（royalslider），它与一个颜色选择器相连，可以从滑块中更改图像。

如果选择新颜色，图像会发生变化。我们希望为这种颜色变化添加平滑的淡入淡出效果。

像这样：Oldimage FadeOut（400）Newimage FadeIn（400）

我们与代码专家的导师合作，但我们找不到解决方案。也许滑块插件会阻止平滑的图像更改。 imageslider适用于名为＆＃34; royalslider＆＃34;。

的插件

这是项目的链接。 [http://printnil.com/products/kindle-paperwhite?variant=887194723][1]

我们正在寻找能够帮助我们的导师。

<div id="product" class="{{ product.handle }}">  


<div class="productcontainer">






<div id="full-width-slider" class="featured royalSlider rsMinW">
    <img id = "img1" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/>
    <img id = "img2" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/>
    <img id = "img3" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/>
    <img id = "img4" src = "{{ '1.jpg' | asset_url}}" alt = "{{ product.type }} - {{ product.title }}"/>
</div>









<div class="buycontainer"> 
<div class="buymargin">


<h1 class="producttitle">{{ product.title }}</h1>
<span class="producttype">{{ product.type }}</span>

{% assign variant = product.selected_or_first_available_variant %}
<span class="pricedetails">{{ variant.price | money | remove: '.00'}}</span>            
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}

<form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">

<div class="product-options {% if hide_default_title %}no-options {% endif %}">
<div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>

<select style="display:none;" id="product-select" name="id">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money | remove: '.00'}}</option>
{% endfor %}
</select>
{% include 'swatch' with 'Color' %}
</div>


{% if product.available %}
<div class="lieferzeit"><span class="instock">Lieferbar</span> innerhalb von 2-4 Werktagen</div>
<button type="submit" id="add-to-cart" class="btn__shoppingbag btn" name="add">In den Warenkorb</button>
{% endif %}  

<button class="btn__customize btn">jetzt personalisieren</button>
<a href="/" class="personallink">Mehr erfahren</a>  
</div>
</form>   
</div>

{% include 'like' %}


</div> 


</div>





<div class="producttabscontainer">    
<div class="producttabs">
<ul class="tabs">
<li><a href="#tab-1">Info</a></li>
<li><a href="#tab-2">Shipping</a></li>
<li><a href="#tab-3">Returns</a></li>
</ul>
<div id="tab-1">
{{ product.description }}
</div>
<div id="tab-2">
{% include 'testcontent' %}     
</div>
<div id="tab-3">
{% include 'testcontent' %}     
</div>        
</div>
</div>   








<div style="display:none" id="preloading">
{% for image in product.images offset: 1 %}
{{ image | product_img_url: '1024x1024' | img_tag }}
{% endfor %}
</div>


    {% for v in product.variants %}
        <li id="{{product.title | append:"-" | append:v.title | append:"_1" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_1" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li>
    {% endfor %}

    {% for v in product.variants %}
        <li id="{{product.title | append:"-" | append:v.title | append:"_2" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_2" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li>
    {% endfor %}

    {% for v in product.variants %}
        <li id="{{product.title | append:"-" | append:v.title | append:"_3" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_3" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li>
    {% endfor %}

    {% for v in product.variants %}
        <li id="{{product.title | append:"-" | append:v.title | append:"_4" | replace:'ß','ss' | downcase}}" style="display: none">{{product.title | append:"-" | append:v.title | append:"_4" | append:".jpg" | replace:'ß','ss' | downcase | asset_url}}</li>
    {% endfor %}


<script>
var selectCallback = function(variant, selector) {

if (variant) {
  var form = jQuery('#' + selector.domIdPrefix).closest('form');
  for (var i=0,length=variant.options.length; i<length; i++) {
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
    if (radioButton.size()) {
      radioButton.get(0).checked = true;
    }
  }
}

  var images = new Array();



    if (variant && variant.featured_image) {



      var mainImageDomEl = jQuery('.featured img')[0];
      var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_1";
      var newImage = variant.featured_image;
      newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML;
      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); // Define switchImage (the callback) in your theme's JavaScript file.

      var mainImageDomEl = jQuery('.featured img')[1];
      var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_2";
      var newImage = variant.featured_image;
      newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML;
      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage);

      var mainImageDomEl = jQuery('.featured img')[2];
      var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_3";
      var newImage = variant.featured_image;
      newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML;
      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage);

      var mainImageDomEl = jQuery('.featured img')[3];
      var newURL = document.getElementById('product').className + "-" + variant.title.replace("ß", "ss") + "_4";
      var newImage = variant.featured_image;
      newImage.src = document.getElementById(newURL.toLowerCase()).innerHTML;
      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage);

    }


    if (variant && variant.available) {
      jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
      if(variant.price < variant.compare_at_price){
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + " <del>" + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>");
      } else {
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
      }
    } else {
      jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
      var message = variant ? "{{ variant.price | money | remove: '.00'}}" : "Unavailable";
      jQuery('#price-preview').text(message);
    }
  };

  jQuery(document).ready(function($){
    new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });

{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}


  });

</script>




<script> 

var switchImage = function(newImageSrc, newImage, mainImageDomEl) {

$(mainImageDomEl).attr('src', newImageSrc);
$(mainImageDomEl).parents('a').attr('href', newImageSrc);
};

</script>

Answer 1

jQuery(mainImageDomEl).stop().fadeOut('slow', function () {
    $(mainImageDomEl).attr('src', newImageSrc);
    $(mainImageDomEl).parents('a').attr('href', newImageSrc);
    $(this).delay(400).fadeIn('slow');
});

Answer 2

<script> 
var parsed = 0;
var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
    $(mainImageDomEl).attr('src', newImageSrc);
    $(mainImageDomEl).parents('a').attr('href', newImageSrc);
    $(mainImageDomEl).css('transition', '');
    $(mainImageDomEl).fadeOut(300, function(){
      $(mainImageDomEl).attr('src', newImageSrc);
      $(mainImageDomEl).parents('a').attr('href', newImageSrc);
      setTimeout(function(){
          $(mainImageDomEl).fadeIn(300);
      }, 100);
    });
};


//if you want to remove the fades, just use this method instead of the previous  
//var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
//      $(mainImageDomEl).attr('src', newImageSrc);
//    $(mainImageDomEl).parents('a').attr('href', newImageSrc);
//};

</script>

为什么这种淡化效果不起作用？

2 个答案: