Question

我正在使用我为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 =”“/＆gt;以及未显示图像的图像，第二个'缩放'图像未正确显示。

任何人都可以看到我出错的地方，或者告诉我如何使其在原始模板中正常运行？看起来似乎是一个神秘的额外“以某种方式添加，但我不知道为什么或如何。

感谢您的帮助......

Answer 1

我不敢相信这已经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"/>

Answer 2

这是我的代码，它对我有用

<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 %>

elevateZoom不太适合在铁轨上工作

2 个答案: