Solved

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

Posted on 2013-01-21
15
797 Views
Last Modified: 2013-02-04
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
0
Comment
Question by:Bowler865
  • 8
  • 7
15 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803970
http://jsfiddle.net/66Pub/23/

let me know if this is the desired behavior.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38804030
0
 

Author Comment

by:Bowler865
ID: 38805660
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38805738
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
 

Author Comment

by:Bowler865
ID: 38805789
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38805817
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
 

Author Comment

by:Bowler865
ID: 38805819
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38805937
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
 

Author Comment

by:Bowler865
ID: 38851353
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38851411
When I click on the fiddle, it's still there.

basically, this is what you want:

var currentSlideNo = $(el).index();
0
 

Author Comment

by:Bowler865
ID: 38851619
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38851653
yeah, go ahead and start a new question, and that way you can also get some fresh eyes on it too.
0
 

Author Comment

by:Bowler865
ID: 38852777
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38852950
hi,

i'm really sorry, i'm not going to have time to look at it for a while... swamped at the moment.
0
 

Author Comment

by:Bowler865
ID: 38852990
no problem, whenever you get a chance.

thanks.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now