jQuery Cycle Plugin with Pager Anchors (Titles pulled from Custom Fields)

1. Currently, you can see that the anchors are numbers, and I’d like to make these anchors display the {title} contents for each entry instead. (The switcher will be limited to the 2 most recent posts) It seems as though this example is the closest to what i’m trying to do, but I can’t break it down into what I actually need. 2. I’m not sure how to dynamically setup the code so that when a user clicks the image, they are directed to the hyperlink associated with that image’s post.

To have the {title} display, I think you’ll have to pass it to the function. Around line 654 (of the option-less plugin) there’s this line:

a = '<a href="#">'+(i+1)+'</a>';

That’s what creates the link. The specifics of getting that info into the cycle plugin will have to come from someone else.

2. Just wrap your img with the anchor link - post the code you’re using and I’ll see if I can’t help you get that done, at least ; )

FWIW, this should probably be up in ‘how-to’ or the ‘html/css’ section.

Here’s my code for the Cycler with Prev/Next buttons (top left of the page). I’m trying to make the image a clickable link to the hyperlink stored in the {cycle_hyperlink} custom field.

<!-- BEGIN HOME_CYCLE -->
<div id="cycle">
          <div id="cycleimage">
                    {exp:weblog:entries weblog="home_cycle" limit="5"}
                    <a href="http://{cycle_hyperlink}">{cycle_image}</a>
                    {/exp:weblog:entries}
         </div>
         <div id="cycletext">
                   {exp:weblog:entries weblog="home_cycle"}
                   <ol class="hidebullets">
                   <li>{title}
                   </ol>
                   {/exp:weblog:entries}
         </div>
         <div id="cyclecontroller"><span><a href="#">Prev</a></span> | <span><a href="#">Next</a></span></div>
</div>
<!-- END HOME_CYCLE -->

As you can see, (I’ve left the changes live) it displays the hyperlink instead of the image, and even when clicked, it doesn’t follow the link…. :/

Looking at the live html, I think you might have some gremlins in your template. Try zapping gremlins (or whatever it’s called in the text editor of your choice), or tediously go through and replace the spaces by hand. The garbles in the href are a too-familiar sight for me ; ) Happens sometimes when you copy/paste from a webpage.

Quick edit: close the li on your title, too. ; )

Hope that helps.

On the left div, you are calling Cycle twice. i think you can create a master div like

<div id="cycleimageAndTitle">
<ul>
{exp:weblog:entries weblog="home_cycle" limit="5"}
                    <li><a href="http://{cycle_hyperlink}">{cycle_image}</a><span class="titleClass">{title}</a></li>
                    {/exp:weblog:entries}
</ul>
</div>

And call the cycle for $(‘#cycleimageAndTitle’).cycle();

This is just for optimizing the code.

For the right div,

You have to create a title list first like

<div id="switchercontent">
Expression engine code to display anchors
</div>

<div id="switchercontroller">
Expression engine code to display title
</div>

And use the click function on the “switchercontroller” titles just like in the example here (http://malsup.com/jquery/cycle/pager6.html)

Hope this helps..

I have just completed a site with cycle plugin.. So it was pretty simple 😊

Cheers vinay

Can anyone else help with this? For the upper right div of this webpage, I basically want to implement a jQuery cycle with 2 Anchors, that display the titles from weblog entries.

Like this, except the numbers would be dynamically pulled with {title}…. Someone… please… I don’t understand how pagerAnchorBuilder works.

Hi Brian,

No absolute promises but give this a try :

<sc*ipt type="text/javasc*ipt">
$('.slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#cycle_navigation', 
     
// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) {
return '<a href="http://+slide.src+">'+slide.title+'</a>';
    } 
});
</sc*ipt>

Just add in your images and nav element like this :

<div class="slideshow">

{exp:weblog:entries weblog="cycle-images" sort="asc" dynamic="off"}
{image-url}
{/exp:weblog:entries}

</div>

<div id="cycle_navigation"></div>

Note you will of course need a weblog (in this example) with the short name of cycle-images and also custom weblog fields called image-url to hold the location of the image and then an image-title to hold the wording for the link. You can of course use any of your custom fields for the link or even the {title} variable if you so wish.

Hope that helps a bit.

Best wishes,

Mark

Hi Brian,

Was just wondering if that got it sorted for you or not?

Let me know if it doesn’t work and I’ll take another look at it. Pretty sure the code above should work though.

Best wishes,

Mark

I haven’t had time. For the time being, I simply used the prev/next method for the two buttons, although this isn’t a good solution because then when you click one twice, it goes to the incorrect slide. Hopefully I’ll get a chance to get around to it today. I’ve been looking for a tutorial that breaks this plugin down line by line, so I can start to understand what everything is ACTUALLY doing. I’m fairly new to jQuery, but I know that if I just keep copying and pasting without actually learning what is happening - I’m doing myself a disservice. I’ll let you know! Thanks for checking in!

I’ll let you know! Thanks for checking in!

No problem at all. Pretty sure it should work as I’ve shown above but just let me know if it doesn’t.

Best wishes,

Mark