search

malsup / cycle2

2nd gen cycling
899 stars 237 forks source link

Captions not working within ul li (alt-caption) #674

Open ob7 opened 9 years ago

ob7 commented 9 years ago

Hello, I get my captions to work fine within a div. The problem is, I have to keep my images in an unordered list, and cycle-sideshow classes are applied to the ul. I am using the alt caption feature. But my div for the caption just says "alt" instead of actually displaying the data in the alt tag of the image. Heres my code:

<aside style="position:relative">
  <h2 class="visuallyhidden">Image Gallery</h2>

  <ul class="cycle-slideshow cushycms" id="hpBanner" data-cycle-slides="li" data-cycle-fx="fadeout" data-cycle-pager="#hpPager" data-cycle-speed="600" data-cycle-timeout="7200" data-cycle-caption="#alt-caption"  data-cycle-caption-template="{{alt}}">
    <li><img class="cushycms" src="../img/gallery/sculptures/01.jpg" width="1920" height="1024" alt="Title 1"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/02.jpg" width="1920" height="1024" alt="Title 2"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/03.jpg" width="1920" height="1024" alt="Title 3"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/04.jpg" width="1920" height="1024" alt="Title 4"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/05.jpg" width="1920" height="1024" alt="Title 5"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/06.jpg" width="1920" height="1024" alt="Title 6"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/07.jpg" width="1920" height="1024" alt="Title 7"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/08.jpg" width="1920" height="1024" alt="Title 8"></li>
    <li><img class="cushycms" src="../img/gallery/sculptures/09.jpg" width="1920" height="1024" alt="Title 9"></li>
  </ul>
  <div id="alt-caption"></div>
  <div id="hpPager"></div>
</aside>

If I take out the li tags and remove data-cycle-slides="li" the tags will work. The problem is, I need the li tags in my code because that is how the cms I am plugging in for the customer will allow them to add or delete pictures from the cms (cushycms repeatable elements).

<aside style="position:relative">
  <h2 class="visuallyhidden">Image Gallery</h2>

  <ul class="cycle-slideshow cushycms" id="hpBanner"  data-cycle-fx="fadeout" data-cycle-pager="#hpPager" data-cycle-speed="600" data-cycle-timeout="7200" data-cycle-caption="#alt-caption"  data-cycle-caption-template="{{alt}}">
    <img class="cushycms" src="../img/gallery/sculptures/01.jpg" width="1920" height="1024" alt="Title 1">
    <img class="cushycms" src="../img/gallery/sculptures/02.jpg" width="1920" height="1024" alt="Title 2">
    <img class="cushycms" src="../img/gallery/sculptures/03.jpg" width="1920" height="1024" alt="Title 3">
    <img class="cushycms" src="../img/gallery/sculptures/04.jpg" width="1920" height="1024" alt="Title 4">
    <img class="cushycms" src="../img/gallery/sculptures/05.jpg" width="1920" height="1024" alt="Title 5">
    <img class="cushycms" src="../img/gallery/sculptures/06.jpg" width="1920" height="1024" alt="Title 6">
    <img class="cushycms" src="../img/gallery/sculptures/07.jpg" width="1920" height="1024" alt="Title 7">
    <img class="cushycms" src="../img/gallery/sculptures/08.jpg" width="1920" height="1024" alt="Title 8">
    <img class="cushycms" src="../img/gallery/sculptures/09.jpg" width="1920" height="1024" alt="Title 9">
  </ul>
  <div id="alt-caption"></div>
  <div id="hpPager"></div>
</aside>`

I need to keep the li elements for this to work the way I need. How can I alter the plugin code or do whatever it takes to get captions to work with li elements?

HunterJoe commented 9 years ago

@ob7 - I don't know if you figured this out by now, but I ran into the same issue with my slideshow as well. As soon as I read your issue I realized what was happening:

The li in your code is the actual slide, not the image elements. so just apply something like data-cycle-title="Title 1" to each li, and then update your template to use data-cycle-caption-template="{{cycleTitle}}".

JeRoNZ commented 9 years ago

@HunterJoe thanks for posting that - it was driving me nutz.