2

我正在使用为我的 rails 应用程序下载的前端模板，并且大多数情况下它工作正常，但我无法让 elevateZoom 功能正常工作。

这是他们的代码：

<div class="thumbnails-show grid_6 omega">
    <img src="images/details-thumb-1.jpg" data-zoom-image="images/details-1.jpg" />
</div>

这是我的：

<div class="thumbnails-show grid_6 omega">
    <img src="<%= image_tag(@product.avatar.url(:medium)) %>" data-zoom-image="<%= image_tag(@product.avatar.url(:large)) %>" />
</div>

这是相关的js：

var zoom_config = {zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            tint:true,
            tintColour:'#ebebeb',
            tintOpacity:0.5,
            borderSize: 0,
            zoomWindowWidth:100,
            zoomWindowHeight:300,
            lensBorderSize: 3,
            lensBorderColour: '#66bdc2', };

    $('.thumbnails-show img').elevateZoom(zoom_config);

    $('.thumbnails a').click(function(){
        var img = $('img', $(this)).clone();
        img.attr('data-zoom-image', $(this).attr('href'));

        img.elevateZoom(zoom_config);

        $('.thumbnails-show').html(img);
        return false;
    });

基本上发生的情况是该文本仍显示在视图中：“ data-zoom-image="" /> 以及未找到图像的图像，并且第二个“缩放”图像未正确显示。

谁能看到我哪里出错了，或者告诉我如何让它像原始模板一样正常运行？似乎以某种方式添加了一个神秘的额外“，但我不知道为什么或如何。

谢谢你的帮助...

4

2 回答 2

0

我不敢相信这个问题已经 5 年没有回答了！你不能写

<img src="<%= image_tag

因为

image_tag(pic.url, ...)

将呈现为 html

<img src="pic.url" ../>

所以你需要写的是：

<img src= "<%= asset_path(@product.image_url) %>" data-zoom-image="<%=asset_path(@product.big_image_url) %>" class="img-zoom"/>
于 2018-07-30T06:03:54.197 回答
0

这是我的代码，它适用于我

<script type="text/javascript">
  $(document).ready(function(){
    $('#bg').elevateZoom({
      gallery: 'gallery',
      zoomType: "inner",
      cursor: "crosshair",
      zoomWindowFadeIn: 200,
      zoomWindowFadeOut: 750
    })
  });
</script>

 <%= image_tag @car.image2.url ,id:"bg" , "data-zoom-image" => @car.image2.url %>
于 2019-02-10T10:30:02.503 回答