如何添加指向AUI轮播图片的链接

Question

Using AUI carousel in liferay DXP (v 3.0). 在liferay DXP（v 3.0）中使用AUI轮播。 Liferay DXP uses AUI version 3.0 on each image it has redirect to different url. Liferay DXP在已重定向到不同URL的每个图像上使用AUI 3.0版。 For following demo code redirection is not working 对于以下演示代码重定向不起作用

<html>
<head>
    <script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
    <link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" 
    rel="stylesheet"></link>

<script>
YUI().use(
  'aui-carousel',
  function(Y) {
    new Y.Carousel(
      {
        activeIndex: 'rand',
        contentBox: '#myCarousel',
        height: 250,
        intervalTime: 2,
        width: 700
      }
    ).render();
  }
);

</script>


</head>
<body>


<div id="myCarousel">

  <a href="http://www.example1.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div></a>
  <a href="http://www.example2.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div></a>
  <a href="http://www.example3.com"><div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div></a>
</div>

</body>
</html>

Any solution ?? 任何解决方案??

Answer 1

That strategy works in AlloyUI 2.0.0 , so it seems like this is a bug in AlloyUI 3.0.0 . 该策略在AlloyUI 2.0.0 ，因此看来这是AlloyUI 3.0.0的错误。

One possible workaround for this bug would be to select all the <img> tag children of your carousel and wrap them with the appropriate <a> tag programmatically: 此错误的一种可能的解决方法是选择轮播的所有<img>标记子代，然后以编程方式将它们与适当的<a>标记包装在一起：

Y.all('#myCarousel img').each(function(img) {
    var imgParent = img.parent;
    var link = document.createElement('a');
    link.href = 'http://www.google.com';
    imgParent.replaceChild(link, img);
    link.appendChild(img);
});

如何添加指向AUI轮播图片的链接

问题描述

1 个解决方案

解决方案1
0 2017-07-13 13:41:02

如何添加指向AUI轮播图片的链接

问题描述

1 个解决方案

解决方案1 0 2017-07-13 13:41:02

解决方案1
0 2017-07-13 13:41:02