Hi there,
I am having a similar issue, but the functionality I want to achieve
is a bit simpler. Right now I want to apply a link of my choosing to
each slide (in the HTML of the slide), but t this breaks the alt
information pulled from the the pager and displays an "undefined"
error on the page. I don't quite know how to achieve this in the code.
This is a snippet of my pager code:
.after('<div id="nav">')
pager:'#nav',
pagerAnchorBuilder: function(idx, slide) {
var navlabel = $($(slide).html() +'img').attr('alt');
return '<span><a href="#">' + navlabel + '</a></span>';
}
}
This is my current jQuery cycle HTML Code for each slide:
<div class="cycler">
<div id="rotator">
<!-- slide 1 -->
<div class="slide"><img src="image1.jpg" width="400" height="120"
alt="Alt Text for Pager" />
<div class="caption">
<h1><a href="link-to-page.html">Title Headline</a></h1>
<p>Caption Text and other HTML</p>
</div></div>
<!-- /slide 1-->
<!-- slide 2 -->
Same code as above but different image and caption content
<!-- /slide 2 -->
</div>
</div>
I want to manually add a custom href around the slide image src (like
the example code below) but it completely breaks it the pager
navigation and shows "undefined" error:
<!-- slide -->
<div class="slide 1">
<a href ="custom-link.html"><img src="image.jpg" width="400"
height="120" alt="Alt Text for Pager" /></a>
<div class="caption">
<h1><a href="link-to-page.html">Title Headline</a></h1>
<p>Caption Text and other HTML</p>
</div></div>
<!-- /slide 1 -->
How can I do this?
Many thanks,
Danielle
On Jul 22, 8:35 am, Charlie <charlie...@gmail.com> wrote:
> the details you want to display can also be contained elsewhere if you want
> by using the index of the current slide to match the index of another set of
> containers
> function onAfter(curr, next, opts) {
> var index = opts.currSlide;
> // use index to refernece other containers to work with
> }
> thus you can hide a series of containers and display the ones you want on
> each slide. Also can use the onBefore to hide, animate or whatever to remove
> the info showing , let new slide show up, then add new info with onAfter
> Mescalero wrote:Thanks guys, Using that, this is what i have: $(function() {
> $('#slides').before('<div id="nav" class="nav">').cycle({ fx: 'fade', speed:
> 'fast', timeout: 0, pager: '#nav', after: onAfter }); }); function onAfter()
> { $('#article-description').html("<h3>" + this.title + "</ h3>")
> .append('<p>' + this.alt + ' <a href=' + this.link +'>Read more ›</p>'); }
> and then in the body i have something like: <img name=""
> src="images/features/botanical.jpg" width="388" height="218" title="Botanical
> Garden" alt="Almost 300 acres, the botanical garden has miles of streams and
> nature trails, display gardens, and flowers and plants."
> link="http://www.scbg.com"/> the only problem is that this.link is coming up
> undefined. I am curious where i need to define it so that it will pick up the
> link attribute like it does "src" and "title." If i just put the link in the
> unused 'name" attribute and change to + this.name it also works, but that i
> may want other attributes later down the road...does this make sense? Matt On
> Jul 20, 7:07 pm, Mike Alsup<mal...@gmail.com>wrote:I would like to add
> another attribute to the img tag called "link."This attribute would define
> where theimagewould link to if someone clicks theimage.Then i could do
> something like: .append('<p>' + this.alt + ' <a href=' + this.link +'>Read
> more ›</p>');Does anyone know what/where i can add in thecyclejs to
> accomodate for this.link?Check out the 'callbacks' example on this
> page:http://www.malsup.com/jquery/cycle/int2.html
