How to add link to images of AUI carousel

Question

Using AUI carousel in liferay DXP (v 3.0). Liferay DXP uses AUI version 3.0 on each image it has redirect to different url. 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 ??

Why I load your code [in a JSFiddle](https://jsfiddle.net/xuyz23ft/) I get a JS error saying `YUI is not defined`. Are you including all the required scripts? Also you should consider moving your script block before the end of the body. — Gyum Fox, Jul 13 '17 at 08:03
better you copy this code in notepad and save it as something.html... (Internet connection should be there) — Sagar Ravikirti, Jul 13 '17 at 09:00
http://meta.stackexchange.com/questions/141823/why-is-cross-posting-wrong-on-an-external-site — Olaf Kock, Jul 13 '17 at 12:17

score 0 · Answer 1 · answered Jul 13 '17 at 13:41

That strategy works in AlloyUI 2.0.0, so it seems like this is a bug in 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:

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);
});

How to add link to images of AUI carousel

1 Answers1