Question

I have used jQuery Cycle for the slideshow on this page: http://energync.ehclients.com/ and set it so the image changes when you mouse over the pager event below it. Since these links are dynamically created by jQuery, how do I add links to other pages on the site?

Here is the html:

<div id="slideshow">
<img src="http://energync.ehclients.com/images/uploads/slideshow-1.jpg" alt="Making Energy Work" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-2.jpg" alt="We Collaborate" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-3.jpg" alt="We Analyze" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-4.jpg" alt="We Advocate" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-5.jpg" alt="We Educate" width="645" height="333">
</div>

Here is the jQuery:

$('#slideshow').cycle({
    fx: 'fade',
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    speed: 2000,
    delay:  3000,
}); 

Answer 1

From jQuery Cycle manual:

pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)

First you need to define pagerAnchorBuilder. Tthat will tell the script which elements it should use for links – so they are not autogenerated anymore. You also need to add allowPagerClickBubble so that the default action (page url) is triggered on click:

$('#slideshow').cycle({
    fx:     'fade',
    speed:  2000,
    delay: 3000,
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#slideshow-nav ul li:eq(' + (idx) + ') a';
    },
    allowPagerClickBubble: true
});

Now, in your HTML code do this:

    <div id="slideshow-nav">
             <ul>
            <li class="collaborate"><a href="">We Collaborate</a></li>
            <li class="analyze"><a href="">We Analyze</a></li>
            <li class="advocate"><a href="">We Advocate</a></li>
            <li class="educate"><a href="http://energync.ehclients.com/we-educate/">We Educate</a></li>
             </ul>
    </div>  

Add URLs to the rest of anchors in that block and it will work.

Working demo (click the last link): JSfiddle