循环图像标题不起作用

Question

我循环播放幻灯片库，我在我的图片上添加了一个标题，但有些错误，为什么我不理解..只有我的属性名称显示在我的标题上我不想要属性名称我想得到属性值我怎么了？

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: ">a",
    caption: '.cycle-caption',
    captionTemplate: "{{data-caption}}",
    pauseOnHover: true,
  });
})

.slide-gallery {
  position: relative;
  width: 790px;
  overflow: hidden;
  height: 500px;
}

.slide-gallery img {
  max-width: 100%;
  height: 100%;
}

.cycle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #FFF;
  z-index: 1000;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<div class="slide-gallery">
  <div class="mySlideShow">

    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-caption="Lorem ipsum dolor sit amet..">
    </a>
    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-caption="This is my caption....">
    </a>
    <a>
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-caption="bla.....">
    </a>
  </div>

  <div class="cycle-caption"></div>
</div>

Answer 1

似乎必须将captionTemplate设置为顶级元素的属性，幻灯片（在本例中为a元素。

这似乎有效。

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: ">a",
    caption: '.cycle-caption',
    captionTemplate: "{{target}}",
    pauseOnHover: true,
  });
})

.slide-gallery {
  position: relative;
  width: 790px;
  overflow: hidden;
  height: 500px;
}

.slide-gallery img {
  max-width: 100%;
  height: 100%;
}

.cycle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #FFF;
  z-index: 1000;
  width: 100%;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<div class="slide-gallery">
  <div class="mySlideShow">

    <a target="Lorem ipsum dolor sit amet..">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
    </a>
    <a target="This is my caption....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
    </a>
    <a target="bla.....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
    </a>
  </div>

  <div class="cycle-caption"></div>
</div>

它似乎不适用于自定义属性，这就是我使用target的原因。如果您不将图像包装在a元素中，则可以使用图像的alt属性，这样更合适。

Answer 2

你定义标题的方式几乎没有错误。

  

错误1 -

首先不支持中的数据字幕属性以显示标题。尽管有数据标题，但在阅读完文档后，您可以使用 data-cycle-title 作为标题。

  

错误2 -

由于选择器是锚标记幻灯片：＆＃34;＆gt;在您的jquery代码中，＃cap; 标签不会在＆lt; 上显示锚标记img＆gt; 。所以我在锚点上添加了 data-cycle-title =＆＃34; Lorem ipsum dolor sit amet ..＆＃34; 。 同时将captiontemplate jquery更改为：

captionTemplate: "' {{cycleTitle}}'",

以下是工作示例。快乐编码：）

＆＃13;

＆＃13;

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: "> a",
    caption: '.cycle-caption',
    captionTemplate: "' {{cycleTitle}}'",
    pauseOnHover: true,
  });
})

＆＃13;

.slide-gallery {
  position: relative;
  width: 790px;
  overflow: hidden;
  height: 500px;
}

.slide-gallery img {
  max-width: 100%;
  height: 100%;
}

.cycle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  padding: 10px;
  color: #FFF;
  z-index: 1000;
  width: 100%;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

<div class="slide-gallery">
  <div class="mySlideShow">

    <a data-cycle-title="Lorem ipsum dolor sit amet..">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
    </a>
    <a data-cycle-title="This is my caption....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
    </a>
    <a data-cycle-title="bla.....">
      <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" >
    </a>
  </div>

  <div class="cycle-caption"></div>
</div>

＆＃13;

＆＃13;

＆＃13;