He ciclado la galería de diapositivas y pongo un título en mis imágenes, pero hay algo mal por qué no entiendo ... Solo mi nombre de atributo que aparece en mi título No quiero atribuir nombre Quiero obtener el valor del atributo te equivocaste conmigo ?

$(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>
0
ani_css 29 mar. 2017 a las 09:48

2 respuestas

La mejor respuesta

Hubo pocos errores en la forma en que definiste tu subtítulo.

Error 1-

En primer lugar, el atributo de título de datos en no es compatible para mostrar el título. Después de leer la documentación a pesar del título de datos, puede usar data-cycle-title para los títulos.

Error 2-

Dado que el selector es una etiqueta de anclaje slides: "> a" en su código jquery, los subtítulos funcionarán en la etiqueta ancla , no en la etiqueta . Así que he añadido data-cycle-title = "Lorem ipsum dolor sit amet .." en los anclajes. También cambia el captiontemplate jquery a esto:

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

A continuación se muestra el ejemplo de trabajo. Happy Coding :)

$(document).ready(function() {

  $('.mySlideShow').cycle({
    log: false,
    fx: 'fade',
    slides: "> a",
    caption: '.cycle-caption',
    captionTemplate: "' {{cycleTitle}}'",
    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 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>
1
Sahil Dhir 29 mar. 2017 a las 07:24

Parece que captionTemplate tiene que establecerse en un atributo del elemento de nivel superior, la diapositiva, en este caso, el elemento a.

Esto parece funcionar.

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

No parece funcionar con atributos personalizados, es por eso que he usado target. Si no envuelve sus imágenes en elementos a, puede usar el atributo alt de la imagen, que será más apropiado.

1
Titus 29 mar. 2017 a las 07:08