0

I'm using bxSlider to run a slideshow. I needed to use external captions, which I did by broadly following this answer.

This is working well for the caption itself, but I also want to change the URL that each caption's link goes to.

I've made an attempt at hacking this together myself using the caption code as inspiration, and various answers from this thread, but I've hit a wall of not knowing what I'm doing.

Code is below, does anybody have any suggestions? I'm sure it's super basic but I just don't JavaScript, which means I'm missing lots of core concepts that would allow me to work this out myself.

<div class="bxslider">

  <div class="slide id-0">
    <a href="/link-1.html"><img src="/images/index-01.jpg" title="Caption 1" /></a>
  </div>

  <div class="slide id-1">
    <a href="/link-2.html"><img src="/images/index-02.jpg" title="Caption number two" /></a>
  </div>

  <div class="slide id-2">
    <a href="/link-2.html"><img src="/images/index-03.jpg" title="Third caption" /></a>
  </div>

</div>

<div class="caption-1">
  <div class="cap-cont">
    <div class="cap-text"><div class="slider-txt"></div></div>
    <a class="box-link">Find out more</a>
    <a href="" class="link-txt"></a>
  </div>
</div>

<script type="text/javascript">

$('.bxslider').bxSlider({
  auto: true,
  speed: 2000,
  pause: 6000,
  pager: false,
  controls: true,
  responsive:true,
  onSliderLoad: function(currentIndex) {
    var slideNum = '.id-' + currentIndex;
    $(".slider-txt").html($('.bxslider .slide' + slideNum).find("img").attr("title"));
    $(".link-txt").html($('.bxslider .slide' + slideNum).find("a").attr("href"));
  },
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
    $(".slider-txt").html($slideElement.find("img").attr("title"));
    $(".link-txt").html($slideElement.find("a").attr("href"));
    $("a.link-txt").attr("href", "http://cupcream.com");
  }
});

</script>
Community
  • 1
  • 1
rickibarnes
  • 187
  • 3
  • 16
  • I don't understand your question...I only saw run on sentences. Please write a question which is a sentence that ends with a `?` not a `.` Nevermind, after the fourth time reading your question, I believe you want to be able to embed a link into each caption...is that correct? – zer00ne Apr 09 '16 at 12:07
  • Ah, well the first part was really exposition to set up the situation, I thought the background might be important. Yes, I want each caption to be able to have a button that links to the same URL as the slide itself. The code I've posted grabs the URL, but then I don't know how to output it to the right place. – rickibarnes Apr 11 '16 at 01:50

0 Answers0