jQuery Cycle Plugin: How to make the button link working?

Question

I have used an external link on one of the buttons and it is not taking me to the link when the button text is clicked. Does anyone know how to fix this?

jsFiddle: http://jsfiddle.net/jetlag/Bjp5j/

HTML markup:

<div class="top button-area">
<div class="button button1">
    <div class="button-text">Button 1</div>
</div>
<div class="button button2">
    <div class="button-text"><a href="http://jquery.malsup.com/cycle/" target="_blank">Button 2</a></div>
</div>
</div>
<div class="image-area">
<div class="image-section">
    <div class="image">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
    </div>
</div>
<div class="image-section">
    <div class="image">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
    </div>
</div>
</div>

jQuery:

var $this = $('.image-area');
  $this.cycle({
  fx: 'fade',
  speed: 'fast',
  timeout: 3000,
  pager: $this.parent().find('.button-area'),
  pauseOnPagerHover: true,
  pagerEvent: 'mouseover',
  pagerAnchorBuilder: function (idx, slide) {
    return $this.parent().find('.button-area .button:eq(' + idx + ')');
  }
});

Answer 1

When you use the .button-text a element as a pager it removes the default behavior of the element (through preventDefault()). If the element has a href attribute you can still make it function as a link by using the following:

$('.button-text a')
    .filter('[href]').click(function(){
        window.location.href = $(this).attr('href');
    });

Here's a fiddle! http://jsfiddle.net/Bjp5j/1/

This will allow for you to retain the functionality to switch the image when you hover over the button and also link to a specified URL.

I must note that this behavior is a little bit strange! The user may attempt to click on the slideshow navigation to change the image and be redirected to another page. This would be an unexpected behavior and might be frustrating for the user.