Question

我在rails网站上使用expandablebanners.js，我必须显示翻转图像的代码;

      <script type="text/javascript">
        var roll_img = "<%= @advert.roll_img.url %>"
        var squarecenterbottom = ExpandableBanners.banner("squarecenterbottom", roll_img);
        squarecenterbottom.animated = true;
        squarecenterbottom.setDirection('down', 'center');
        squarecenterbottom.expandOnClick = false;
        if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
        else if (!window.onload) window.onload = function(){documentReady=true;}

      </script>

主图像显示在页面上;

         <%= link_to image_tag(@advert.img(:horizontal) title: @advert.name,),
             @advert.target_url, :id => 'squarecenterbottom' %>

当你翻转主图像时，它应该显示翻转图像但是当我翻转图像时，它只显示翻转图像的网址（即文本），我不知道问题是什么....

代码输出是;

<script type="text/javascript">
        var roll_img = "http://localhost:3000/system/adverts/large_imgs/000/000/004/original/1n.jpg?1401967781"
        var squarecenterbottom = ExpandableBanners.banner("squarecenterbottom", roll_img  );
        squarecenterbottom.animated = true;
        squarecenterbottom.setDirection('down', 'center');
        squarecenterbottom.expandOnClick = false;
        if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
        else if (!window.onload) window.onload = function(){documentReady=true;}

      </script>
      <a href="www.example.com id="squarecenterbottom"><img alt="test22" height="90"  src="/system/adverts/imgs/000/000/004/horizontal/2n.jpeg?1401818651" title="test22" width="730" /></a>
  </div>

这是文档中的代码，显示了它的工作原理;

<script type="text/javascript">
    var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/square_expanded.jpg");
    squaretopleft.setCloseImage("images/closebutton.jpg", 'left', 'top');
    squaretopleft.animated = true;
    squaretopleft.setDirection('up', 'left'); 
    squaretopleft.expandOnClick = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}
</script>
</head>

<body> 

<a id="squaretopleft" href="www.yourwebsite.com"><img src="images/square.jpg" /></a>
</body>
</html>

Answer 1

这可能是路径或HTML结构问题要检查的事项：

在您的输出中，您的<a>元素就在<script>之后。然后有一个</div>结束标记。你有开场<div>吗？它们都在<body>吗？
由于ExpandableBanners代码设置了onload和DOMContentLoaded个侦听器，请尝试将其移至文档的<head>。
您的原始图片具有 .jpeg 扩展名，而滚动图片具有 .jpg 。没错，但要确保在正确的路径中有正确的图像（和扩展名）。例如原始图片位于/imgs文件夹下，滚动位于/large_imgs下。这样可以吗？
尝试滚动图像的相对路径。在这种情况下：在开头删除http://localhost:3000。（假设您的原始图像显示正常。）

Answer 2

几点：

var roll_img...声明
正如Ruby Racer所提到的，生成的锚标记缺少双引号<a href="www.example.com

脚本标签内的回形针图像设置显示图像文本URL而不是图像 - expandablebanners.js

2 个答案: