JQuery Cycle paging/navigation question (onPagerEvent & before functions)

I am using cycle to cycle through a bunch of banner ads with thumbnails (auto-generated pager elements). The thumbnails are highlighted as the banners cycle, they provide a title and short description for the banner.

The way it's designed it shows 4 paging elements at a time below the banners. I have a fairly completely functional version here: http://jsfiddle.net/66Pub/

Where I'm stuck is if you click on Thumbnail2 and then Thumbnail3 while the first transition is still finishing the list of thumbnails will move one spot too far to the left. Also, if Thumbnail5 is on the screen and you click on Thumbnail2 (so Thumbnail1 is now visible) then click on Thumbnail1, Thumbnail1 slides out of view.

If there's a way to make this work as intended I would greatly appreciate the help. I would like it to work as dynamically as possible with regard to the number of banners that can be added, at least as many as 8.

TIA
Bowler865Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
0
 
Kyle HamiltonData ScientistCommented:
http://jsfiddle.net/66Pub/23/

let me know if this is the desired behavior.
0
 
Bowler865Author Commented:
Thank you very much, that second one is very close and solves a couple of the issues. The only issue I see now is that once it cycles through once, then you click on Thumbnail2, then Thumbnail1, the first banner displays but the thumbnails slide to the left so that the matching Thumbnail1 isn't visible.

There must be a flaw in my logic but I can't see it. Any idea?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Kyle HamiltonData ScientistCommented:
yes, it's not quite right yet.

The problem I was seeing was that the index in the before function, is one value behind the index in the onPagerEvent function - so I suspect they are clashing somehow. there is nothing you can do about that.

(if you log the index, you will see what I mean - 0 appears twice the first time you run it - http://jsfiddle.net/66Pub/30/)




Though to be honest, I'm not sure what the actual desired behaviour should be.
0
 
Bowler865Author Commented:
Perfect!

Now, do I dare add prev/next functionality? LOL

Thank you for your help!

http://jsfiddle.net/66Pub/42/

I updated as you suggested (before you deleted your suggestion) to use the el index. I had been  writing the indexes to an alert message to see what was going on and saw that slide 1 and 2 were both "0" in the index which I thought was strange
0
 
Kyle HamiltonData ScientistCommented:
glad that worked out and you were able to catch it before I deleted it :)

I'm still not sure that the behavior is as it should be, but that is more a design choice - as long as it works the way you want it..

Cheers.
0
 
Bowler865Author Commented:
I take that back, now Slide 5 thumbnail slides off the navigation when clicking on Thumbnail5 but slide 1 stays when Thumbnail1 is selected after cycling through at least once.

Maybe I should get rid of the click/advance altogether and just have the selected Thumbnail be highlighted. I could then switch over to a scroll-on-hover for the pagination. Any idea how that could be handled? I've looked around for an example but didn't find anything.

In the meantime I'll accept your solution so you get the points for your help.
0
 
Kyle HamiltonData ScientistCommented:
Did you try out any of the cycle pager demos?
http://jquery.malsup.com/cycle/more.html?v2.23

I have to say, I really don't like the scroll on hover navigation - it's really irritating - I know a lot of people who would agree with that.

I made something similar (just to share some family pics) but with a different plugin - jquery tools - some time ago, which seems to have the kind of functionality you're looking for:

http://thehamiltonians.com/sammy-party.php

It can be customized to look however you want of course.
0
 
Bowler865Author Commented:
Sorry to be a pain, but I've been buried with work since this post and I never copy/pasted the code I said worked in the updated fiddle (based on the suggest you deleted). Now I can remember what that suggestion was. Not sure why the fiddle didn't save but now I'm at a complete loss.

How/where were you suggesting to use the "el index" again?

Thanks and sorry to bother you again.
0
 
Kyle HamiltonData ScientistCommented:
When I click on the fiddle, it's still there.

basically, this is what you want:

var currentSlideNo = $(el).index();
0
 
Bowler865Author Commented:
Thanks for checking, I thought that it looked right but it wasn't running without making an edit to it so I wasn't sure it was right.

Anyway, the only bug I see still is that when I click on the first thumbnail after it's cycled through once it shifts the thumbnails to the left and the selected thumbnail (#1) slides out of view. This should not happen. Is there a way to stop that from happening?

Let me know if you want me to start a new question so I can give you some more points.
0
 
Kyle HamiltonData ScientistCommented:
yeah, go ahead and start a new question, and that way you can also get some fresh eyes on it too.
0
 
Bowler865Author Commented:
I posted a new question earlier.

No responses yet, in case you want to take a look.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28019371.html
0
 
Kyle HamiltonData ScientistCommented:
hi,

i'm really sorry, i'm not going to have time to look at it for a while... swamped at the moment.
0
 
Bowler865Author Commented:
no problem, whenever you get a chance.

thanks.
0
All Courses

From novice to tech pro — start learning today.