ElevateZoom带单选按钮

Question

我是编码的绝对新手，所以请提前原谅任何错误。

我有一个非常简单的手工编码商店，有3种产品：

1. 白色T恤[默认选择]
2. 灰色T恤
3. 海军条纹T恤

用户可以使用单选按钮查看每个T恤的预览，这会使用Javascript更改图像src。

然后我尝试使用ElevateZoom Jquery插件（http://www.elevateweb.co.uk/image-zoom/examples）来允许用户放大所选的预览图像，该图像使用与缩放图像相同的图像src文件。

到目前为止，只要用户点击其中一个单选按钮，我的代码就可以正常运行。但是，ElevateZoom在单击单选按钮之前不会运行 - 因此默认图像（白色T恤）将不会缩放，除非用户先选择另一个单选按钮，然后选择＆＃34;白色T恤＆＃34;单选按钮。

这里是相关的Javascript / Jquery：

            function chooseTee() {
            var image_src;

            if (document.getElementById('whiteTee').checked) {
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg";

            }else if (document.getElementById('greyTee').checked) {
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/grey-t-shirt.jpg";
            }else{
                image_src = "https://s3-eu-west-1.amazonaws.com/lovealetter/navy-t-shirt.jpg";
            }

            $(document).ready(function() {
            $('#tee').attr('src', image_src);
            $('#tee').data('zoom-image', image_src).elevateZoom({ 
            zoomType: "inner", 
            cursor: "crosshair",
            responsive: "True",
            });
        });
    }

和相关的HTML：

    <div class="img">
    <img id="tee" src="https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg" data-zoom-image="https://s3-eu-west-1.amazonaws.com/lovealetter/white-t-shirt.jpg" />
    <div class="colourpicker">
    Available colours:<br>
    <label><input type="radio" name="option" value="white" id="whiteTee" onclick="javascript:chooseTee();" checked />White
    <label><input type="radio" name="option" value="grey" id="greyTee" onclick="javascript:chooseTee();" />Grey
    <label><input type="radio" name="option" value="navy" id="navyTee" onclick="javascript:chooseTee();" />Navy
    </div>
    </div>

非常感谢听到更简单的方法来做到这一点或确实是一个修复。提前致谢。

Answer 1

Working Plunker

在单击单选按钮之前获取此选项的关键是添加在页面加载后立即执行的代码，如下所示：

的Javascript

$(document).ready(function() {
 $("#tee").elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    responsive: "True",
  });
});

看起来你在一个函数中有一些类似的代码，当你加载页面时没有调用它。此外，您不需要在页面加载时包含data('zoom-image', image_src)，因为该信息包含在HTML中。

要使缩放在使用相同的src时正常工作，您需要将CSS的img宽度更改为小于实际图像的宽度。

CSS

#tee {
  width: 400px;
}

查看ElevateZoom文档后，看起来它打算与两个单独的图像文件一起使用。您可以将较小的版本作为src放大，将放大的版本放在data-zoom-image中。