Как добавить ссылку на изображения AUI carousel

Question

Как добавить ссылку на изображения AUI carousel

Использование AUI-карусели в liferay DXP (v 3.0). Liferay DXP использует версию 3.0 AUI для каждого изображения, которое он перенаправляет на разные ссылки. Для следующего демо-кода перенаправление не работает

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

Любое решение??

1

javascript liferay carousel alloy-ui liferay-dxp

Источник

user4152403 13 июл '17 в 07:40

1 ответ

Другие вопросы по тегам javascript liferay carousel alloy-ui liferay-dxp

user2880970 13 июл '17 в 13:41 2017-07-13 13:41 · Answer 1 · 2017-07-13 13:41

Эта стратегия работает в AlloyUI 2.0.0так что похоже это ошибка в AlloyUI 3.0.0,

Одним из возможных путей решения этой ошибки было бы выбрать все <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);
});